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>
Related
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 created a button that will take in a website url and then display stars to collect a website rating. That part works fine. When trying to click on the stars to highlight the clicked and all prev (prevAll) stars and change the source to staron.gif but nothing happens on click. I want to use the delegate function to do this, and then a function. My function is not working.
$('#websiteButton').mousedown(function() {
var inputSite = prompt("Enter one of your favorite website urls");
var appendHTML = "<div class=\"webfav\"><a href='"+inputSite+"'>"+inputSite+"</a> <img id=\"s1\" src=\"staroff.gif\"/><img id=\"s2\" src=\"staroff.gif\"/><img id=\"s3\" src=\"staroff.gif\"/><img id=\"s4\" src=\"staroff.gif\"/><img id=\"s5\" src=\"staroff.gif\"/> <br></div>";
$('#sect2').append(appendHTML);
});//end of add favorites
$('.webfav').delegate('img', 'click', function() {
$(img, this).attr('src', 'staron.gif');
$(img, this).prevAll().attr('src', 'staron.gif');
});
I've also tried just this and this.id
I ended up just needing to move "});//end of add favorites" to the bottom after the delegate function executed. It was executing before the stars were added to the page the way I had it.
I am practicing JS doing a project and have run into issues (again).
Just upfront, to explain what i want.
I have the top level buttons with nation names, on click a pic will fade into a container just for that. It gets the pic from the first array on line 1.This all works very well. However...
When that container is visible, I want a click handler on the "next" button to the right. This handler is one function (line 29-42) which animates the second div(.containsNext) by changing opacity and rotate values.
This function also calls another function (next, this should change the target div background with pics from the new Array) and has an if else statement.
The if condition works as it is supposed to.
The else condition does not run, even if i take out the nested next() function.
I think the error (console doesn't return one) on the next function is the lines 15 and 16, I know those lines look "funny":-)
And the if statement in the wrapper function does not work either.
How to fix this? Please make sure to select France, Italy or Croatia buttons, or the next button will not respond at all (do not know why either).
One more question on the side, what would be an economical way to store the pics for all the nations arrays selected/triggered by the next button?
Also how to do implement the proper nations array to be selected based on the top button nation selection?
Thank you guys
function
var imgLenght = 3;
var currentImg = 1;
function next() {
var imgContainer = document.querySelector(".containsNext");
if(currentImg > 0)
{
imgContainer.style.background = "url(" + "im[currentImg-1]" + ")";
currentImg = currentImg - 1;
}
}
Link to the pen:
http://codepen.io/damianocel/pen/gPggLB
use correctly nested quotes:
imgContainer.style.background = 'url("' + im[currentImg-1] + '")';
First posting. I am attempting to use buttons defined in HTML to call a function that creates buttons via JavaScript while the other button removes the buttons created.
HTML:
<div id="thisdiv">
<input type="button" onclick="makeButtons()" value="Add" />
<input type="button" onclick="removeButtons()" value="Remove" />
</div>
Javascript:
function makeButtons()
{
var buttonOne=document.createElement("BUTTON");
var buttonTwo=document.createElement("BUTTON");
buttonOne.setAttribute("id", "yesdombutton"); //adds id to button
buttonTwo.setAttribute("id", "nodombutton"); //adds id to button
document.getElementById("thisdiv").appendChild(buttonOne); //appends buttons
document.getElementById("thisdiv").appendChild(buttonTwo);
}
function removeButtons()
{
var div = document.getElementById("thisdiv");
div.removeChild(yesdombutton); //this works only once in firefox but >
div.removeChild(nodombutton); //works over and over in IE
}
As the comment sin the remove() function state, the code as is only works once in Firefox, but works fine in IE10. And by work, I mean that I can click the Yes and No buttons in the HTML section, back and forth, and the buttons created by the JavaScript appear and disappear as they should.
I would like the same to occur in Firefox but I have been unable to find an answer.
And a friend of mine mentioned that I have a scope issue... The following code makes the site work like how I want it to.
Javascript:
function removeButtons()
{
var div = document.getElementById("albumown");
var destroyMe = document.getElementById("yesdombutton"); //This makes it so that
var destroyMeToo = document.getElementById("nodombutton"); //the buttons I want to
//remove are referenced
div.removeChild(destroyMe); //correctly
div.removeChild(destroyMeToo);
}
Thank you to those that asked about this! I have been wracking my head for a week trying different things. But, all is well now.
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';
});