I am having a few issues with the jquery plugin (ImageMapster). ImageMapster has provided a demo jsfiddle to test out their demo, they use one resource and the rest is right in front of you: http://jsfiddle.net/nYkAG/396/
If you hover over the image, you will be able to several small boxes and when you hover over them, you will see a description under the image. (if it doesnt work then try clicking on the image itself). It uses the area tag.
I tried to use the same method and implement it on a normal HTML site. However, its not working and i cannot understand what i have done wrong to the jsfiddle that is not working.
Example SIte: http://www.nina-naustdal.com/index1.html
Its Exactly the same site, which is annoying. Can someone shed some light onto this issue.
Thanks again for your assistance.
Just wrap your code in
$(function(){
// Your code
});
or
$(window).load(function(){
//Your code
});
You are accessing #beatles before loading it in DOM.
Its running under jsfiddle because it is wrapping in $(window).load(function(){
Related
Been making this websites for a bit today as I've been getting back into making websites. I'm trying to use jquery and have even tried pure javascript to get this click button to work. I went through and copied and pasted the entirety of this pages code into jsfiddle and for some reason it refuses to work in my code but works just fine when I put it into jsfiddle.
So when you click the button on the top right, its going to give the div below a new class. You can see it works here in jsfiddle but for some reason it refuses to work in my copy on my computer.
My html page is correctly loading jquery because I've used .resize() already but it refuses to allow me to use any version of click in any way or form.
Does anyone have any insight as to what may cause this click function to stop working?
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
https://jsfiddle.net/nathanahartmann/a3s9zjk6/3/
Browser plugins? I know I've shot myself in the foot because my ad blocking or social media blocking plugins mess with frameworks and other java-script behavior.
Seems to work fine now: JS Fiddle
You were missing a lot of ';'s throughout this function:
var banner = $("#banner-message");
var button = $("#rHotBar");
// handle click and add class
button.on('click', function(){
banner.addClass("alt");
});
Similarly, you were referencing the image for var button, not the outer class, the click was registering on the outer div, not the image itself! :)
Weirdest thing ever, It's where it's referencing Jquery in relation to my javascript. For some reason I just posted
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/javascript.js"></script>
a second time down below to see what it would do and for some reason it started working. Not really sure why it's doing this but it seemed to work for some reason. It's not referencing Jquery correctly somehow?
I am trying to put together parallax section scrolling using parallax.js. I cannot seem to get the sections to work correctly. I am following the tutorial they have at http://pixelcog.github.io/parallax.js/ but for some reason my code is not working correctly. Not sure if i'm missing something or if the code it not responding as it should. Can someone shed some light on this issue? my test code is listed at http://gynxprinting.com/test/
Since it's a Jquery plugin you'll also need to load Jquery,
try adding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I need to have a 'Click to Accept Terms' checkbox on my site (http://www.formulafast.co.uk/book-now.html), that enables a link to another page when checked.
So far I have adapted a script and html that has worked successfully (elsewhere on the internet) and works fine in JS fiddle (see http://jsfiddle.net/pjs53/hQJXW/104/) but as soon as I paste onto my page fails to work.
HTML is:
<input type="checkbox" id="check"/><label for="check">I have read and accept the Terms & Conditions</label></br></br>
The Javascript is in the jsfiddle above.
Worth mentioning that I'm using Weebly...and the html part is currently embedded as a snippet halfway down the page. The javascript is in the header section of this particular page. If anyone has a better suggestion please don't be shy.
I have a feeling it may be the placement of the code that may be causing it not to work, or I am missing a tag to link the two together...any ideas?
Reading the comments above, you actually forgot to include jQuery in your html, like this :
<script src="path_to_jquery_file"></script>
Your JSFiddle is using jQuery as a framework (look on the left), that's why it works but not your web page.
I am using the supersized plugin: http://buildinternet.com/project/supersized/docs.html#api_docs
But it is troubling me, the documentation is not very clear or not to me at least.
I am trying to load different images via my menu items, the doc says to insert the following but I do not understand where I should be adding this:
$(element).click(function(){
api.nextSlide();
});
I tried to put it anywhere with no luck, anyone?
I had to include any css files that came with supersized. And i missed them, that what the issue was.
I've got the following... http://jsfiddle.net/yUVF4/3/ Basically it's just a form which when the button is pressed a loading screen should appear using the javascript there and the resource I've added jquery.loader.js. However, It's not working and I can't seem to grasp why. Anyone got any ideas?
Just add div wrapper in the content parameter of the plugin, it works
content:'<div>Loading...</div>'
See jsfiddle