I'm building a website which has tooltips to give advice on what to do which display after a few seconds of inactivity. The thing is, there's certain circumstances when I don't want them to show up.
The website has 'pop-ups' (just div tags on which the z-index is changed). When these tags are 'in view' I don't want the tool tips. Is there anything I can do to the code to check if a div is at a certain level, or perhaps insert a command to NOT run the tooltip code...
My tooltip script is
<!-- JavaScript function to show/hide prompts after innactivity-->
<script type="text/javascript">
$(document).ready(function(){
var interval = 1;
setInterval(function(){
if(interval == 9){
$("div.container_prompts_timeout").show();
interval = 1;
}
interval = interval+1;
console.log(interval);
},1000);
$(document).bind('mousemove keypress', function() {
$("div.container_prompts_timeout").hide();
interval = 1;
});
});
</script>
And the code I use to change z-index is:
<!--Code to change z-index of background divs-->
<script type="text/javascript">
function changeZIndex(i,id) {
document.getElementById(id).style.zIndex=i;
}
</script>
Many thanks
Why not to use display property of your divs to hide and show them.
And you can check the state of it.
Something like
var my_div = getElementById("my_div");// or use your jQuery if you wish
function show() {
my_div.style.display = "block";
}
function hide() {
my_div.style.display = "none";
}
function is_shown() {
if (my_div.style.display == "none") return 0;
return 1; // use booleans if you wish, I prefer old school :)
}
you could:
check if the popups are "visible" before showing the tooltips, or
cancel the interval when they become visible and restart it when they are hidden
personally, I wouldn't use the z-index to show or hide things. I would set their actual display style property to 'none' to hide them. this would allow you to check this property before showing the tooltips, because checking the z-index of the element might be a little cumbersome.
Related
Hey guys I'm making my own website just for fun and the following code makes a list of shapes appear. Does anyone know how I could incorporate another button instead of the fadeOut code to make it so that when I click another button, a "hide menu" button. The shapes will fadeOut. This is because the code I have at the moment means that the shapes will fade out by themselves over time. Pls help!
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1aside").fadeIn(100);
$("#div2aside").fadeIn(200);
$("#div3aside").fadeIn(300);
$("#div4aside").fadeIn(400);
$("#div5aside").fadeIn(500);
$("#div6aside").fadeIn(600);
$("#div7aside").fadeIn(700);
$("#div8aside").fadeIn(800);
$("#div9aside").fadeIn(900);
$("#div10aside").fadeIn(1000);
$("#div11aside").fadeIn(1100);
$("#div12aside").fadeIn(1200);
$("#div13aside").fadeIn(1300);
$("#div14aside").fadeIn(1400);
$("#div15aside").fadeIn(1500);
$("#div16aside").fadeIn(1600);
$("#div17aside").fadeIn(1700);
$("#div18aside").fadeIn(1800);
$("#div1aside").fadeOut(17670);
$("#div2aside").fadeOut(17660);
$("#div3aside").fadeOut(17650);
$("#div4aside").fadeOut(17640);
$("#div5aside").fadeOut(17630);
$("#div6aside").fadeOut(17620);
$("#div7aside").fadeOut(17610);
$("#div8aside").fadeOut(17600);
$("#div9aside").fadeOut(17590);
$("#div10aside").fadeOut(17580);
$("#div11aside").fadeOut(17570);
$("#div12aside").fadeOut(17560);
$("#div13aside").fadeOut(17550);
$("#div14aside").fadeOut(17540);
$("#div15aside").fadeOut(17530);
$("#div16aside").fadeOut(17520);
$("#div17aside").fadeOut(17510);
$("#div18aside").fadeOut(17500);
$("section").fadeOut(0);
});
});
</script>
If I understood your question right, you should do a toggle, I find this the simpliest way to do that:
$(document).ready(function(){
var toggle = 0;
$("button").click(function(){
if (toggle === 0) {
$("#yourDivsToFadeIn").fadeIn(YourTimeToFadeIn);
toggle = 1;
}
else if (toggle === 1) {
$("#yourDivsToFadeOut").fadeOut(YourTimeToFadeOut);
toggle = 0;
}
});
});
EDIT: You also could use:
$(document).ready(function() {
$("button").click(function() {
$("#YourDivsIds").fadeToggle(YourTimeToToggleTheFade);
});
});
But I find the first way to do this better, because if you get to learn some more Javascript/jQuery, there arent always .toggle methods to toggle something. Then you better should learn - and get used to - the first method.
-But thats just my point of the view.
At first you need two buttons in your HTML:
<button id="infader">Fade all in</button>
<button id="outfader">Fade all out</button>
Then in your JS you first select all divs to fade with one jQuery selector and store them in a variable. It's faster, less to write and the attachment of the different fading times becomes easier.
// get all divs with an ID that ends with 'aside'
var asides = $("div[id$='aside']");
// get first button and attach the click-handler
$("#infader").click(function() {
// take all asides and use 'each() to execute a function on each of them
// keyword 'this' is one div-element, i is it's index in the collection
asides.each(function(i) {
// the divs gets a fading time depending on their index
// the first (i == 0) gets 100ms, the last (i == 17) gets 1800ms
$(this).stop().fadeIn((i + 1) * 100);
});
});
// get second button similar
$("#outfader").click(function() {
asides.each(function(i) {
$(this).stop().fadeOut((17 - i) * 10 + 17500);
});
});
What does the .stop() before fade? Lets say you have started a fadeIn and then click the out-button before it has completed. Now the fadeIn ist stopped and the fadeOut begins immediately. If you want instead the fadeIn finishing completely before fadeOut runs just remove the .stop().
Its easy to change the fade-times to fit your needs.
While I've done some Javascript coding, I consider myself a more novice, Frankenstein-type coder, basically cutting and pasting with trial and error to see if I can get something to work...just a heads up on my honest assessment of my experience level.
I've got a unique thing I'm developing for, and hoping to get some help with Javascript. Here's what I'm trying / need to do: for a webpage based kiosk presentation, I'm using one HTML webpage, but with multiple sections whose visibility toggles on/off based on a Javascript I currently have that works fine. (I don't want to / can't use regular HTML pages with links because of how it ends up running).
The only problem with the above issue is that there's no easy way to create a 'back' or 'previous page' link for an end page that may have multiple ways to get to it. It won't 'know' where the user came from.
So here's what I'd like to do: pass 2 variables through my OnClick javascript function, the DIV name that needs to toggle on/off ... AND a 2nd variable of the current visible DIV name so that the next DIV that toggles on can 'remember' what the previous (and now invisible) DIV was so that there can be an accurate 'back' button.
Here's some sample code:
Each DIV section that turns on an off is setup like this:
<div id="sectionName" class="content">
</div>
These DIVs have buttons/links that are setup like this:
These run a Javacript:
function toggleVisibility(selectedTab) {
var content = document.getElementsByClassName('content');
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
So what I'm hoping is that there is a way to do something like this:
So that when that is clicked, the next DIV that turns on could also include a Javascript generated link based on that passed variable, something like:
Previous<br>Menu
I'm aware that Javascript toggling of DIVs on and off may not allow the generation of a dynamic Javascript link like the one I'm describing above, so I'm throwing this out there for some help from other, far more experienced programmers. Ideally, I'd like to try and fit everything into what I've created so far, so I don't have to start over from scratch. Any ideas?
Please reference this sample page:
www.gs3creative.com/test/
You could use location hashes (mypage.html#mydivid) and then use history.back() to handle 'back' navigation.
To stitch up the div's showing on the correct hash value....
var oldHash = '';
// fires when the hash changes
function hash_changed() {
var hash = location.hash.replace('#', ''); // get the div ID
var div = document.getElementById(hash); // find the content div on the page
var allDivs = document.getElementByClassName('content'); // get all of the content divs
// hide all the content divs
for (var i = 0; i < allDivs.length; i++) {
var thisDiv = allDivs[i];
thisDiv.style.display = 'none';
}
// only show the right one
div.style.display = 'block';
}
// this triggers the event
setInterval(function() {
// if the hash has changed, fire the function
if (oldHash != location.hash) {
oldHash = location.hash;
hash_changed();
}
}, 100); // call every 100 ms so that there is no lag
So if you set the navigation to 'mypage.html#sectionName' it would hide all other div's of the class 'content' and then only show the div with the ID of 'sectionName'.
An easy solution for me would be to render two content pages on a HTML page and show and hide content when needed from a onlick handler via javascript in your CSS add a class:
function showDiv() {
document.getElementById("theObject").className = "visible";
}
CSS:
// Switch between the content adding the classes and removing the old class
.visible{
display:none;
}
.show{
display:block;
}
Another solution using sessions "php" via javascript to hold the variables with in statements.
<?php if (session_status() == PHP_SESSION_NONE) {
session_start();
$_SESSION['user_is where_variable'] = "im on page div 1";
}
This could also be done through js anyways.
javascript have a conditional statement using your $_SESSION vars;
if (variable == "im on page div 1" ){
// your functions
}else if ( variable == "im on page div 1"){
// another function
}
Create your click handler to update the variables in the session.
<script>
function showhide() {
document.getElementById('someimage').style.visibility="hidden";
}
</script>
At the moment I am able to hide the image, however then I have no way to show it again.
How can I hide and then be able to show an image when clicking a button using javascript?
Here's the button:
<body>
<input type="button" onclick="showhide()" />
</body>
Simply check what the current state is, and then act accordingly.
function showhide() {
var img = document.getElementById('someimage');
if (img.style.visibility === 'hidden') {
// Currently hidden, make it visible
img.style.visibility = "visible";
} else {
// Currently visible, make it hidden
img.style.visibility = "hidden";
}
}
And a quick note about jQuery to all those suggesting it.
For simple things like this, there is no need to include a big DOM manipulation library. If you are doing a lot of DOM manipulations like this in a more complex application, then jQuery starts to make more sense to include.
But it's also important to understand what jQuery is doing for you under the hood when you use it.
The wonders of jQuery - http://jsfiddle.net/PbG3t/
$(function() {
$('#button').click(function() {
$('#someimage').toggle();
});
});
If you are using jQuery, you can use the (.toggle) method which simplifies things a lot:
$('#someimage').toggle();
If you want to stick with a hand-crafted solution, I guess your code is actually missing the deciding bit that sets the element's visibility back to visible. Try:
<script>
function showhide() {
var element = document.getElementById('someimage');
element.style.visibility = element.style.visibility == 'visible'
? 'hidden'
: 'visible';
}
</script>
Cheers, Alex
ok so im using timeout to try and get this javascript load after a 3 second delay.
there's two divs being loaded through this javascript;
dialog and cover.
At the moment though the dialog is showing straight away on page load and only the cover is waiting 3 seconds to load/show. but this shouldnt be the case i want both divs to show together after 3 seconds.
Please can someone show me where to fix this.
<script type="text/javascript">
setTimeout(function () {
var cvr = document.getElementById("cover")
var dlg = document.getElementById("dialog")
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}, 3000);
</script>
The reason could be, dialog may be having display:block property at the load time. Try change that to 'none' at the very first through css. Another thing is gave a look at that if statement, you are assigning rather than comparing.u shd be using this '==' operator right.. ?
Cheers .. ;)
Your "dlg" element must not be hidden on page load. Check your HTML and CSS, and add display:none as needed.
I'm trying to make some code which finds if a div exists, and if it does then have it fade away slowly. I have this to determine whether or not the div exists
if($('#error').length != 0)
{
$('#error').hide(500);
}
And that does work but only on a refresh, I've been attempting to put it in a timer like this:
var refreshId = setInterval(function()
{
if($('#error').length != 0)
{
$('#error').hide(500);
}
}, 500);
But its not getting rid of the innerHTML! I have some code which on hover alters the innerHTML of the error div so I can fill it up, but for some reason this isn't working, any advice would help!
Thank you!
$("#error").fadeOut(500);
Update:
If you are looking to check for existence:
var msg = $("#error");
if(msg.length) {
msg.fadeOut(500);
}
If you want to empty it:
$("#error").empty();
If you just want to delay 500ms then fade out, do this:
$("#error").delay(500).fadeOut();
To also empty the element, provide a callback to .fadeOut() like this:
$("#error").delay(500).fadeOut(function() {
$(this).html('');
});
There's no need to check .length, if an element that matches the selector isn't present, nothing happens :)
The div you're trying to hide likely hasn't loaded by the time your script runs. Try this; it will defer execution until the DOM is loaded:
$(document).ready(function() {
// put your code here
});
This is a good practice when using jQuery anyway.
Reference: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()