On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/
Your javascript to init the bxSlider isn't working, it looks like you may have an errant "style" tag or something (it's trying to close a style block, the body, and the html all within your script), also make sure to include type="text/javascript" in your tag, and finally it's usually safest to do you jQuery onLoad functions like so:
jQuery(function($){
$(...).blahblah();
});
Then "$" will be scoped a bit better.
first of all you are using
<script src="myscripts.js"></script>
before loading jquery.
Please always use jquery scripts after loading jquery.min.js
also try to load the
<script src="js/jquery.bxslider.min.js"></script>
after bootstrap.js
Related
I am trying to get the truck to drive across the screen Directly under my nav menu in Wordpress. The code executes perfectly in js fiddle , but when I try to load the JavaScript file, all I get is a still image (JavaScript is not loading)
Here is the working js fiddle:
http://jsfiddle.net/J2RPq/60/
Here is the code I applied to page.php:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script>
<div id="animate">
<img id="plane" src="http://thumb10.shutterstock.com/thumb_small/507037/507037,1274380827,2/stock-vector-black-and-white-big-rig-silhouette-53528596.jpg" /></div>
</script>
CSS
css :#animate { position: relative;}
Can someone help me with this error?
Regarding jQuery and Wordpress...
First, you should never load jQuery using the <script> tag when using Wordpress. Wordpress has it's own method for how stuff should be loaded. You can read more about there here: http://matthewruddy.com/using-jquery-with-wordpress/
Second, you may already have jQuery loaded in your Wordpress. Wordpress themes frequently already have jQuery installed, but it runs in No Conflict mode. This means that instead of using $ in your functions, you need to write out jQuery.
Hopefully that gives you a starting point troubleshoot...
You shouldn't need to load jQuery, WordPress should load a version already.
You have an extra </script> at the end of your html that doesn't appear to belong.
Make sure you place your script tag <script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script> inside of your <head> tag in header.php, try right before the line </head>.
Make sure your div is placed in page.php (assuming that's the correct template file). You should be able to see it even if the script isn't firing, and if you can't there is some other problem.
Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.
I have been using a jquery slideshow, but when I include a jquery newsticker (text that scrolls to the right) either the slideshow or the menu javascript popup (or both) do not work. For instance, if I put
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
right above the slideshow script, the slidshow works but something else does not. If I put the code inside the head tag, its the other way around. This is very unusual (and not logical), but Ive been troubled with this stuff for 6 hours. I am sure this is the only link to jquery, besides a prototype.js that works with the menu. However, I am simply editing the website so I do not know how everything works.
Does anyone have an idea about what may be the solution?
The other way I can deal with this is by using a javascript slideshow (but no jquery).
But I cant find an example of what I want, that works without jquery.
What I need is this - php gets all images from a folder, and data (links) from the database. Each image is actually a link, and all images are displayed inside a div.
<div id="slideshow">
<img src="src.jpg">
<img src="src.jpg">
<img src="src.jpg">
</div>
div id slideshow is what the javascript (again, not jquery) uses to know what to cycle (fade animation). Can someone please help me here?
Other libraries like prototype and mootools also share the same "$" alias so when combined in same page they conflict.
You will need to use jQuery.noConflict() to resolve.
In a script tag immediately after jQuery loads call:
jQuery.noConflict();
Now in order to continue using "$" in your code, wrap code in:
jQuery(function($){/* $ argument passes use of $ alias for jQuery into function*/
$(selector).hide() ; /* can use normal jQuery syntax inside this function*/
});
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
I am new to jquery. I am working on a website that uses a scroll function I found to move from page to page its scripts looks like this:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
I also have a script that I want to use on a few pages that is a type of shadowbox for an image gallery. Its script looks like this:
<script type="text/javascript"src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
If I have both scripts on the page then only the shadowbox works and the scrolling does not. If I take the shadowbox script off then the scrolling does work.
If I put the shadowbox script above the scrolling script then only the scrolling works.
I am not sure if I need to include any more information to explain my problem. From what I can tell it is these scripts that are causing the problem and conflicting with each other.
With jQuerytools, you only need to include it and you get jQuery 1.6.4 for free (read quick start, and you can remove jquery from it if you want, look below the quick start). Therefore, by including jQuery 1.3.1 above jQuery tools, you are trying to load two different versions (1.3.1 and 1.6.4) of the same toolkit, thus conflicting with each other and causing you problems.
Remove the line including jquery 1.3.1 and try that.
I had a problem with jQuery plugins clashing somehow.
So after a little research I loaded both scripts into the head of the html document, between consecutive separated script tag zones. Then I used:
window.onload = function() {function01(); function02();};
to load each function in an orderly fashion and separately.
It worked for me this time.
I may be missing something completely obvious here but when I call $("#zoom_slider").slider() I get no slider appear.
If you goto this url you can replicate the issue by click on any of the images in the main window, this will then load a larger image (currently of a watch). The slider should appear to the top right underneath where it says "Zoom" but it does not...
I include the jQuery UI from google via this call:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
I can't say for sure, but what I would try to do would be to put all of your script declarations in the <head></head> section of your HTML. Also, make sure you are using the most up to date versions of jQuery UI and jQuery.