I have a navigation bar at the top of my eform that skips to the next and previous div (page/section) but only if that div is visible. The divs are hidden unless activated with a checkbox. so the next button on the nav bar needs to work by always taking you to the next available div.
The following code works for the first button but these nav bars display at the top of each section so the next section has a next button on it running the same function (which doesn't work) i'm struggling to exlpain myself here so please shout if i'm not making sense. Here's my code.
function showNext(){
var pages = [document.getElementById("page2"),document.getElementById("page3")];
var next = ["page2marker","page3marker"];
for (var i=0; i<pages.length; i++){
if(pages[i].style.display == "block"){
window.location.hash = next[i];
}
}
}
Can i amend this function so that it will work for all buttons. I.e by always navigating to the next available div that is visible? I think i've probably missed a trick and a whole load of info but see what you think, any ideas?
Many thanks
You can achieve this using jQuery with the jQuery.next function - http://api.jquery.com/next/.
For a set of html like this:
<nav><a class="showNext">Show Next</a></nav>
<div class="content" style="display:none">I'm hidden</div>
<div class="content">I'm Visible</div>
You could use something like:
$('.showNext').bind('click', function(e) {
e.stopPropagation();
e.preventDefault();
window.location.hash = $(this).next('.content:visible').attr('id') + 'marker';
});
Related
I am creating a profile centered website.
I have a webpage that has fixed side buttons (SKIP and ADD). I know that I may need to create an array for all the webpages/profiles but... How do I start the process for the SKIP and ADD buttons to cycle to the NEXT profile in the list/array? Both the SKIP and ADD buttons move to the NEXT profile. However, a small notice appears when you click ADD to move forward.
I do have programming experience and have my AWS and Linux certifications. I'm not worried about following along! Please help. Any and all assistance is so greatly appreciated!!!
You weren't detailed enough in your question so that's the skeleton to handle a cursor for a list. A cursor that will be moved and processed by the add() and skip() functions called by the click events of the buttons Add and Skip. The div#currentItem holds the value of the current item in the list. Every time you press the Skip button, the cursor will move to the next item showing it's value on the div above said. Ever ytime you press the Add button, the function add() will be invoked:
<div id="currentItem">
</div>
<input type="button" onclick="skip();">Skip</button>
<input type="button" onclick="add();">Add</button>
<script>
var list = [];
var cursor = 0;
$(document).ready({
init();
});
function init(){
//feed here list var somehow
showCurrentItem();
}
function showCurrentItem(){
$('#currentItem').text( list[cursor] );
}
function skip(){
cursor++;
showCurrentItem();
}
function add(){
let currentItem = list[i];
//do something with currentItem
}
</script>
I've got a container that includes several icons the user can hover over and be shown a block of text next to it. I'm grabbing the blocks of text from an array and have a randomize function so that they're always shown a different block of text when revisiting the page.
I ran into an issue where every time you hover over an icon, it keeps adding more array elements, because the function gets called each time you hover over the icon. So I decided to use the one() method so the function only runs once, however that's where my real issue is. Using the one() method doesn't show ANY text, and I'm pretty sure it's due to the nested function I have.
You can test this out here: http://www.evanvolmering.com/bootstrap/docs/examples/carousel/eyeswideshut.html
In the banner a video will play, and shortly into it a little icon will appear in the bottom of left of the banner. Hovering over it will show some text. When you hover over it again it adds another array item, and so on. It works, but I don't want it to keep adding array items.
10 seconds later another icon will appear to the top right, which currently has the one() method applied to it. As you can see nothing happens when you hover over it. Not sure where to go from here.
My randomize code (which I got from another StackOverflow answer):
var numRandoms = 14;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = 0; i < numRandoms; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
My code which currently 'works' but keeps adding more array items on hover:
$('img.button1').hover(function(){
$('p.trivia1').fadeIn("slow");
$( 'p.trivia1' ).append(makeUniqueRandom());
},
function(){
$("p.trivia1").stop().fadeOut("slow");
});
My code that uses one() but doesn't do anything on hover:
$('img.button2').one("hover",function(){
$('p.trivia2').fadeIn("slow");
$( 'p.trivia2' ).append(makeUniqueRandom());
},
function(){
$("p.trivia2").stop().fadeOut("slow");
});
Use mouseenter/mouseleave instead of hover
$('img.button1').on('mouseenter',function(){
$('p.trivia1').fadeIn("slow");
$( 'p.trivia1' ).append(makeUniqueRandom());
}).on('mouseleave',function(){
$("p.trivia1").stop().fadeOut("slow");
});
I am working on a Website with fixed menu at the top of the Site. If you hover over the navigationbar it moves down to reveal the links.
The hover is realised with css classes.
The navigation should be shown completely, when you enter the site or scroll to the top.
I am trying to realise it using a javascript method which uses with the scroll progress.
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS > 200){
alert('you have scrolled to the h1!');
$document.getElementById('awning').addClass('awning:hover');
$document.getElementById('nav').addClass('awning:hover #nav');
}
});
Does it make sense or is there a better way to do it?
The alert doesn't even show up
You cannot assign pseudo-classes like this. A pseudo-class is used to define a style of element when special state occurs (for example hovering over element, link being already visited) or element is somehow special( first of kind, even etc.).
You will have to create additional class in css like this:
#awning.revealed{ /* notice there is no space between selectors */
/*your css code goes here (same as in :hover)*/
}
And then just add class to element like this:
$document.getElementById('awning').addClass('revealed');
Please use the code below and click on the 2nd value (200)
$('.wi').on( "click", function() {
console.log('clicked');
var temp = $('.wi');
if (temp.hasClass('wi-celsius')) {
alert("Current is 'Celsius'... updating it to 'Fahrenheit!'");
var convertedTemp = parseInt(temp.text()) * 9 / 5 + 32;
temp.text(convertedTemp);
temp.removeClass('wi-celsius');
temp.addClass('wi-fahrenheit');
}else {
alert("Current is 'Fahrenheit'... updating it to 'Celsius!'");
var convertedTemp = (parseInt(temp.text()) -32)/ (9/5);
temp.text(convertedTemp);
temp.removeClass('wi-fahrenheit');
temp.addClass('wi-celsius');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="list">
<li>100</li>
<li> <i class="wi wi-celsius">200</i></li>
<li>300</li>
</ul>
Is that what you need?
What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.
I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.
I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.
You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}