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".
Related
I would like an animation to autostart on page load. I'm in the Onsen UI V2 JS Splitter example within the ons-template in an ons-page.
I found that adding a script tag between the "/ons-page" and the "/ons-template" tags gets read (this took me quite some time... (-; )
I followed the guide
<script>
document.addEventListener("init", function(event) {
if (event.target.id == "score.html") {
Progress1();
}
}, false);
</script>
But nothing happened.
I changed it to:
.... html stuff
</ons-page>
<script>
$(document).ready(function() {Progress1()});
</script>
</ons-template>
But now it cannot find a component from the HTML file and it says
Uncaught Error: container does noet exist #container1 www/lib/jquery-3.1.0.slim.min.js:2
What can i do? I solved it now with a button. That proves it works, but is of course no auto start.
Any ideas...?
thanks
I see this one is old, but anyway.
Onsen UI documentation says:
There are several events you can listen to. 'init' or 'show' will do the trick. Make sure you load the script as an external file, not inline script. Cordova templates are added and removed on navigation. Inline script is not efficient at all
document.addEventListener('init', function(event) {
if (event.target.matches('#yourpage')) {
ons.notification.alert('Page is initiated.');
// Set up content...
}
}, false);
This doesn't look a good way to achieve your goal. You should use Cordova Events or, if you need to wait for Onsen to be loaded, ons.ready function. Here is an example:
<script>
ons.ready(function() {
//execute your code
});
</script>
Hope it helps!
With a lot of help, this is a solution that works. It is an interval that checks if the container 'exists'. It repeats until the container is there and then it calls the function. In the function the interval is cleared (so it stops checking).
See also here: http://www.w3schools.com/js/js_timing.asp
var tryForContainer;
function progression1Test(){
tryForContainer = setInterval(checkIfContainerIsReady, 100);
}
function checkIfContainerIsReady(){
//alert(document.getElementById('container1'));
if(document.getElementById('container1') !== null){
Progress1();
}
}
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
Ok so i have a simple jquery script im trying to load into wordpress i have other scripts already working but for some reason this one is not working. I have it working just on a simple html page but right when i put in wordpress.
Could someone help me and let me know why i keep getting unknown syntax error
jQuery(document).ready(function ($) {
jQuery(".comb-7").hover(function () {
$(this).find('.background-hover').toggle();
}
});
thanks for any help
This cant Work, you're missing the cloosing the bracket for the hover method
You don't close the hover method. Should be:
jQuery(document).ready(function($) {
$(".comb-7").hover(
function () { $(this).find('.background-hover').toggle(); });
});
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 am a web design student and fairly new to jQuery/Javascript so I know this is fairly basic, but everything I have tried has not worked. I am using unslider (unslider.com) on my main page and I am trying to pause the slider on a click event. The documentation on unslider.com shows that you can stop and start the slider based on the following code:
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
// Pause Unslider
data.stop();
The problem I am having is that I am not sure how to access or utilize these predefined methods in my own js file. Here is the code I am trying, but it is not pausing the slider:
$(document).ready(function() {
$('.button').click(function() {
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
data.stop();
});
});
Any help with this would be greatly appreciated! Thanks
After the slider is stopped, I am trying to run the following functions:
$details_link = $('.active').data('url');
$('#inner_wrap').load($details_link, function() {
$('.banner').slideToggle( "400", function() {
$('body').toggleClass('no_scroll');
$('#slider_btn').toggleClass('slider_btn_down slider_btn_up');
});
});
Here's a working fiddle.
Make sure that your JS is like so:
$(document).ready(function () {
unslider = $('.banner').unslider();
$('button.stop').on("click", unslider.data("unslider").stop);
});
Then in your HTML make sure that your button is like so:
<button class="stop">Stop the slider</button>
And you're all set.
In terms of utilizing methods from other JS files, just make sure that the location of the script tag for the library you want to use is before your own JavaScript so that the library loads before you can call one of its methods. Something like this, where application.js is your custom JavaScript:
<script src="jquery.js"></script>
<script src="unslider.js"></script>
<script src="application.js"></script>
As long as you have both javascript files linked within the same page, and the file that has the function you are calling is linked first, you will be able to call functions from other files, as described in this post:
Can we call the function written in one JavaScript in another JS file?