I was looking to find out what version of jquery do i used based on the following script that my friend wrote for me, unfortunately he is on holiday so I can't get in touch with him.
I have added the following code within my body tag and then calling it below that:
$(document).ready(function() {
$('.top_cols_hide_arrow').click(function() {
$('.finishing_top_cols_hide').toggle("top");
});
$('.top_cols_hide_arrow').click(function(){
$(this).toggleClass('active');
});
});
and the HTML part:
<div class="finishing_top_cols_hide_arrow_mn">
<span class="finishing_top_cols_hide_arrow">open</span>
</div>
I am trying to run this on my localhost but whenever I click the arrow nothing happens and then I realised that I dont really have a script source for this to function and I'm not sure what I need to link to, in order to get this to work.
If somebody could please advise.
You can use this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
The code that your friend wrote for you is simple so most of Jquery versions will support it.
Related
So this question should be really basic, but I can't find anything specifically related to it online or on Stack Exchange.
I'm running to run some DOM in my .js file to replace JavaScript function calls within the HTML and to use Qtip for tool tip implementation. However, I cannot get even the most basic of scripts to run for this function. Here's some code snippet:
<body>
<div id="title_Bar"></div>
<script type="text/javascript" src="DOMscript.js"></script>
</body>
And here's the code for DOMscript.js:
$('#title_Bar').mouseover(function() {
alert("hello");
}
I've already called Jquery in the header because I use it in most of the other scripts I'm running which are all working just fine, but I can't get the mouseover or hover or any of the other neat UI JavaScript tricks working.
I tried loading DOMscript.js in the header with the rest of my scripts and that didn't work either. I want these watchdog functions to be running constantly but not interfering with the functionality of the page overall, so any advice on this would be greatly appreciated!
Please note down the correction;
$('#title_Bar').mouseover(function() {alert("hello");});
closing parenthesis were missing in you code.
Ya'll might want the .hover function instead...
$("#title_Bar").hover( function () {
alert("Mouse is entering the element");
}, function() {
alert("Mouse done up and left the element");
});
... i made a little jsfiddle with it too
i was looking for some solution it but i didnt find anything.
I think its jquery conflict. I have installed smart-slider, and after move my Wordpress into another hosting its just stopped working. My browser shows me: "undefined its not a function", and my code (generated by plugin ofc):
<script>
njQuery(document).ready(function () {
njQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
I was trying to change it into $.('#next.. or jQuery('#next, but it still broke.
Any ideas?
You can change the code to be a simple jQuery. And not the njQuery.
<script>
jQuery(document).ready(function () {
jQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
Otherwise it won't work. Or else, just make sure that the server has a variable or a script file to handle the njQuery too.
I've the following piece of code which works on one page and doesn't work on another though html markup is the same on both pages:
JS
$("#books_list").on('click', '.load-more-books', function(event) {
// Some stuffs
});
Html
<div id="book_list">
...
</div>
More books
Even after entering JS code in Chrome Browser console events not bound.
Can anyone help me with this, what am I doing wrong?
Thanks,
Sultan
The selector you specified means that .load-more-books needs to be a descendant of #book_list for this to work.
Upgrade to jQuery 1.8.1 and see the results
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...
I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.