Home › Forums › JavaScript › Javascript working in jFiddle but not project! :(
- This topic is empty.
-
AuthorPosts
-
November 15, 2016 at 3:03 pm #247895cscodismithParticipant
I am trying to incorporate a minimize function so everything within a
<div>
with the idcontent
will close on button click. It seems to be working great here on the JSFiddle but when I try to incorporate in my project, there is no reaction when clicking the button :(Here is what my
<head>
looks like:<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-signin-client_id" content="618381226281-f3ht6d47jl818rjmr0p3rh3idftoaka7.apps.googleusercontent.com">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="includes/css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,300,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="includes/js.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<title>'.$title.'</title>
</head>and here is what my
button
anddiv#content looks
like:`<input type=”button” id=”hideshow” value=”show/hide” />
<div id="content"> <!-- heading here --> <h3>Admin Level 1 Panel</h3> <p>Use this module to create new posts</p> <form method="post" enctype="multipart/form-data" class="admin_module"> <input class="input2" type="text" name="title" placeholder="Headline" required /><br /> <input class="input2" type="text" name="date" value="' .$current_date. '" readonly /><br /> <input class="input2" type="text" name="author" value="' .$author. '" readonly /><br /> <div class="input2"> <p>Select image to upload:</p> <input style="padding:3px;" type="file" name="image" id="image" /> </div> <textarea class="ta-summary input2" type="text" name="summary" placeholder="Summary" required></textarea><br /> <button class="input2 btn btn-default" type="submit" name="submit">Submit Post</button> </form> </div>
`
November 15, 2016 at 3:32 pm #247897ShikkedielParticipantA link to the non-working example might be more useful then… why use such an old version of the library by the way?
November 15, 2016 at 3:49 pm #247898cscodismithParticipantWhen I clicked the JSFiddle link it seems to work fine though? also I used an old version as that is the one from another post I seen regarding this.
November 15, 2016 at 4:24 pm #247900ShikkedielParticipantIf you use a newer version, you’ll have many more handy methods at your disposal later on. All it really needs is to not use
live
(deprecated). I thinktoggle('show')
is a typo by the way, it should probably be'slow'
. Which I think any invalid string (accepted areslow
andfast
) defaults to:Still, hard to say why it wouldn’t work on your page without actually seeing it…
November 15, 2016 at 4:48 pm #247902cscodismithParticipantThanks a lot! Seems it was the outdated version of jQuery and the weird
toggle('show')
– switching that totoggle('bubblebath')
as you had in the JSFiddle you linked worked!November 15, 2016 at 5:04 pm #247903ShikkedielParticipantYou sure it’s not because I left out the
.live
listener then? Best to changebubblebath
toslow
, it was just to demonstrate that any random (invalid) word would have the same effect – defaulting totoggle('slow')
. Eventoggle('')
should actually work. You could also put in any number to define the duration. Currently it’s 600ms ('slow'
).Edit – I wrote that
live
was deprecated but it’s actually been removed since jQuery 1.9. So it’ll break any newer version… -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.