I am trying to make a menu that comes in from the left and then the body moves.
But for some reason my jQuery code won't work!
<script src="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link src="jan.js"></link>
That's my html code. and my jQuery code in js is this:
var menu = function() {
$("div.menu_icon img").click(function() {
$(".Menu").animate({
left: 'opx'
}, 200);
$("body").animate({
left: '285px'
}, 200);
});
}
$(document).ready(main);
Main should be menu?
$(document).ready(menu);
You don't include JS scripts using the <link> tag. Use <script src="..."> instead:
<!-- include jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- include your script -->
<script type="text/javascript" src="path/to/your/javascript-file.js"></script>
Take a look at this StackOverflow question.
Related
I am trying to adding custom script in the main header of the prestashop but it is not working. may be i am doing wrong
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" data-keepinline="true">
jQuery(".category_drop_menu").click(function () {
alert("asdas");
});
</script>
Please help me how i can add my custom script in prestashop header.tpl
Not sure what the problem is. I changed it a little but I think your example should work.
$(document).ready(function() {
$(".category_drop_menu").click(function() {
alert("Works");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button class="category_drop_menu">Click</button>
This question already has an answer here:
Jquery conflict with jquery tools [closed]
(1 answer)
Closed 7 years ago.
In my Bootstrap page I used jquery.tools.min.js for navigation drop-down and jquery.min.js for a model box which display image by its id.
If I used jquery.min.js, Model box work well but navigation not work.
I used jquery.tools.min.js in navigation.php file, So all of my page got it at first. And I have many many content with jquery.tools.min.js.
Now how put those all file together.
My code:
<button class="light btn btn-info btn-responsive" id="http://myimage1.jpg">Display</button>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.light').click(function(){
var src = $(this).attr('id');
var img = '<img src="' + src + '" class="img-responsive"/>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(img);
});
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
});
</script>
You need to include jquery.js before jquery.tools.js:
If you prefer to load the jQuery library separately the recommended practice is to load jQuery from Google's CDN service. Make sure the jQuery library is always loaded before the jQuery Tools library.
http://jquerytools.github.io/download/
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Always you need to jquery link first after that you can include rest of link...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I have two javascript scripts I want to use, a clickable dropdown menu and slick.js for an image slideshow. The clickable dropdown menu only works if placed in the header, and slick only works if placed in footer....and they both end up conflicting each other, one overriding the other depending on where the javascript library is called. For example, the following code would only show the slideshow:
HEADER:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
// Clickable Dropdown
$('.menu-main-menu-container > ul').toggleClass('no-js js');
$('..menu-main-menu-container .js ul').hide();
$('.menu-main-menu-container .js').click(function(e) {
$('.menu-main-menu-container .js ul').slideToggle(200);
$('.clicker').toggleClass('active');
e.stopPropagation();
});
$(document).click(function() {
if ($('.menu-main-menu-container .js ul').is(':visible')) {
$('.menu-main-menu-container .js ul', this).slideUp();
$('.menu-main-menu-container').removeClass('active');
}
});
});
</script>
FOOTER:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/slick/slick.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/slick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slideshow-images').slick({
});
});
</script>
And as soon as I remove "jquery-1.11.0.min.js" from the footer the dropdown menu starts working again. How can I get both to work simultaneously?
You only need to load jQuery once.
The reason it stops working is because when you load it a second time, the original jQuery object is overwritten and no longer valid. However, the code that's already been executed in your header is tied to the original object, which means that it doesn't work when the click event is triggered.
Solution: only load jQuery once.
I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless
First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css
To get lightbox functionality in my page,i have added js files in master page.
after some time,i needed to use jquery in child page.so i have added jquery reference in child page.
When i added jquery reference in child page,lightbox stops working.
How to resolve this problem?
when i remove jquery reference from child page,lightbox works fine.
Is this Jquery conflict problem??
FYI i have shown my js files here
Master Page Javascript files :
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
Child page Javascript files :
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"> </script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict(true);
function showClose(obj) {
obj.style.display = 'none';
$j("#spnFullInfo").slideDown(1500);
return false;
}
</script>
try first only lightbox functionality. Keep only jquery.js and lightbox.js remove other .js files. you might have conflict with prototype or scriptaculuos.
Just put your jquery reference in master page instead of child.
Hope this helps..