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
Related
My jquery function works fine on local, but once I add it to my WP footer and upload, nothing.
There are a lot of scripts on this page, the but the script I'm trying to make work is this:
jQuery(document).ready(function($){
$("li.accordion").on('click',function() {
$('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});
Jquery is loaded and working, but this script won't function.
Any ideas?
EDIT: Thanks, but it wasn't the stray '
I seemed to be having a cache issue on the site, which has been updated now. Still having the problem.
EDIT2: Removed a link
Your site has a syntax error on it. There is a quote at the end of your JavaScript which may well be causing it to not execute.
jQuery(document).ready(function(){
jquery("li.accordion").click(function() {
jquery('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});' <--- quote here
Ok, you've fixed that now, and all the JavaScript is working, but I can see the next issue that prevents the menu from showing is a CSS rule with !important. (It's overriding the style="display:block" attribute on the mega-sub-menu that is added via JQuery).
So after doing a little more googling, I came up with this answer:
jQuery(function($){
$('li.accordion').click(function() {
$('.mega-sub-menu', this).slideToggle('fast', function() {});
}).click();
});
Here we simulate the click so that the accordion starts out closed and I don't need to add any more CSS to anything.
I added important to the CSS earlier to overcome the inline style — like an idiot, not realizing that the jquery was adding the inline style (I think that's what I did anyway, it was inappropriately late.)
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.
I'm attempting to get some jquery code to run after a sharepoint page loads, the code being:
$(".ms-commentcollapse-icon").click();
I've been using the following to load the code after the page loads, but it does not seem to be very reliable (it will work sometimes and other times it wont):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
</script>
are there any other good methods for achieving this? I'm not sure what's going on, sharepoint could be at fault, but I figured I would try fiddling around with the script a bit more first.
You could use an auto-executing function:
<script type="text/javascript">
(function () {
$(".ms-commentcollapse-icon").click();
} ());
</script>
If this is SharePoint 2010 or above, you can use ExecuteOrDelayUntilScriptLoaded(yourfunction,"SP.JS") to keep your code from firing until after the SP.JS library has loaded (or you can put any other library in the second parameter for a similar effect).
If this is in a web part and you don't want it to execute until other web parts on the page are fully loaded, make sure the web part containing the script is below the other web parts.
As a last resort, you could execute it on a delay using setTimeout or setInterval, but that's ugly.
You can prevent the default behaviour by using e.preventDefault(); within the function.
<script type="text/javascript">
$(".ms-commentcollapse-icon").click(function(e) {
// We're going to stop the default behavior
e.preventDefault();
//some code here
});
</script>
I want to hide the slider (and a bit more) if someone uses the search module on my Joomla site and tried several solutions mentioned here on stackoverflow like: https://stackoverflow.com/a/1760605/1641903
Currently my code looks like this:
<script>
if (/\/search\//.test(window.location)) {
$('#hideonsearch').hide();
}
</script>
I wrapped the slider in <div id="hideonsearch> and tried mentioned jquery in both the body and head (just to be sure), but it doesn't seem to work as you guys can see here.
Any idea on how to get in working?
I saw in your web site that the jquery is not loaded when your code is being executed.
You must put your code in the "onload" function, or make sure the jquery is loaded before doing this.
window.onload = function () {
if (/\/search\//.test(window.location)) {
jQuery('#hideonsearch').hide();
}
};
Or you can use the pure javascript code that is better.
window.onload = function () {
if (/\/search\//.test(window.location)) {
document.getElementById("hideonsearch").style.display = "none";
}
};
I saw another error in your web site now, related to this code:
jQuery(document).ready(function(){
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
error:
undefined is not a function
And it is related to the same problem, jQuery is not loaded, so you can use "window.onload".
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.