0

I've been a little confused as how I'm supposed to connect my jquery to my page, and I'm still still relatively new to learning javascript/jquery. When I put the script in the head nothing happens when I click on the I have set up in my file below. But on my jfiddle it works fine.

I have a portion of my site where I want to have a mock iphone where people who visit the page can click on it.

I used this jfiddle I found on stack overflow: how to make div slide from right to left

There's a link that goes to jqueryui and shows the script for the slide effect there. Am I supposed to use this in the head?

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

This is my jfiddle that I tweaked slightly as to what I'm looking to achieve: http://jsfiddle.net/tokyothekid/weujtht5/

Here's my current code in the head:

<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<script>
$( document ).click(function() {
  $('#iphone-button1').click(function(){

                if ($('#iphone-panel2').is(':hidden')) {

                   $('#iphone-panel2').show('slide',{direction:'right'},1000);
                } else {

                   $('#iphone-panel2').hide('slide',{direction:'right'},1000);
                }
});
    </script>

Here is my html:

    <div id="iphone-panel1">
       logo 
       <a id="iphone-button1">start</a>
    </div>
<div id="iphone-panel2">User Area</div>

My CSS:

#iphone-panel1{
    width:200px;
    height:200px;
   position:absolute;
}

a {
    color: #000;
    cursor:pointer;
    display:block;
}
#iphone-panel2 {
    width: 200px;
    height: 200px;
    display: none;
    background: red;
    position:relative;
}

Appreciate all the help

Community
  • 1
  • 1
Tokyothekid
  • 9
  • 1
  • 4
  • 1
    Works on `fiddle` not on my page etc are hard to answer as that will be machine specific issues.. Just try to paste complete `html` so that we can identify whether there are any issues in `html` – Guruprasad J Rao Sep 30 '15 at 04:16
  • make sure that your src on the script tags are the correct path to the jQuery files. Seems like they aren't loading correctly. – T0t3sMcG0t3s Sep 30 '15 at 04:34
  • 1
    Are you using tools like Firebug? It seems you just forget to close the function, add one more }); and you r good to go.. also use $( document ).ready instead of $( document ).click – Nyoman Aditya Tripalguna Sep 30 '15 at 04:43
  • @NyomanAdityaTripalguna changing it to $(document).ready and adding the }); was it! – Tokyothekid Sep 30 '15 at 22:34

0 Answers0