How do I add a link in the description of an index array in javascript? My code is below, thanks. I tried using push method, but I think I had a conflict with the showpic function. I really don't know, so I would appreciate any help.
<script type="text/javascript">
mypic = new Array();
mypic[0] = ["images/Lg_image1.jpg", "Large image 1 description."] //I want to add an HTML link to a website at the end of this array
mypic[1] = ["images/Lg_image2.jpg", "Large image 2 description."] //I want to add an HTML link to a website at the end of this array
function showpic2(n) {
document.getElementById("mainpic2").src = mypic[n][0]
document.getElementById("mycaption2").innerHTML = mypic[n][1]
count = n
}
count = 0;
function next() {
count++
if (count == mypic2.length) {
count = 0
}
document.getElementById("mainpic2").src = mypic2[count][0]
document.getElementById("mycaption2").innerHTML = mypic2[count][1]
}
function prev() {
count--
if (count < 0) {
count = mypic2.length - 1
}
document.getElementById("mainpic2").src = mypic2[count][0]
document.getElementById("mycaption2").innerHTML = mypic2[count][1]
}
</script>
<body>
<div id="container">
<div class="menu1">
<ul>
<li>Link 1 </li>
</ul>
<ul>
<li>Link 2 </li>
</ul>
</div>
<div id="large"> <img src="images/Lg_image1.jpg" class="mainpic2" id="mainpic2"> </div>
<div id="thumbs2"> <img src="images/sm_image1.jpg" alt="image1"/> <img src="images/sm_image2.jpg" alt="image2"/> </div>
<div id="mycaption2">Large image default description. </div>
<div id="logohome"> <img src="images/#.png" alt="" /> </div>
<div id="homebox"> <img src="images/homebox1.png" alt="" /> </div>
</div>
</body>
</html>
<script type="text/javascript">
mypic = [];
mypic.push({address:"images/Lg_image1.jpg", desc: "Large image 1 description."});
function showpic2(n) {
document.getElementById("mainpic2").src = mypic['address']
document.getElementById("mycaption2").innerHTML = mypic['desc']
count = n
}
</script>
something like this
I don't know what problems you had with .push() but this should work:
mypic[0].push("<a href='link.html'>I am a link</a>");
And of course the same can be done with mypic[1].
Related
<div>
<div class=category> Birthdays </div>
<div class=category> Anniversaries </div>
<div class=category> Newborns </div>
<div class=category> Weddings </div>
</div>
<ul>
<li class="product-filter-items">Birthdays</li>
<li class="product-filter-items">Weddings</li>
<li class="product-filter-items">Newborns</li>
<li class="product-filter-items">Anniversaries</li>
</ul>
<script>
let proCatList = document.querySelectorAll(".category")
let proFilterItems = document.querySelectorAll(".product-filter-items")
for(let i = 0; i < proFilterItems.length; i++){
proFilterItems[i].addEventListener("click" , function(){
if (proCatList[i].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == proFilterItems[i].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() ){
proFilterItems[i].classList.add("active-filter")
console.log("Class Added")
}
})
}
</script>
I am trying to add a class based on a click event. What I am trying to do is if classname, category and product-filter-items are equal then it should add a classname called active-filter on click. Can anyone point out why this statement does not recognise the textContent of proCatList?
The iteration param i can't be used in the event handler. Therefor you could use the index of the clicked element, which you can call with this.
For getting the index, you can use the following small function:
const getIndex = elem => [...elem.parentNode.children].indexOf(elem);
Working example:
let proCatList = document.querySelectorAll(".category");
let proFilterItems = document.querySelectorAll(".product-filter-items");
/* small function for getting the index */
const getIndex = elem => [...elem.parentNode.children].indexOf(elem);
for (let i = 0; i < proFilterItems.length; i++) {
proFilterItems[i].addEventListener("click", function() {
const elem_index = getIndex(this);
if (proCatList[elem_index].textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim() == this.textContent.toUpperCase().replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()) {
this.classList.add("active-filter");
console.log("Class Added");
}
})
}
<div>
<div class=category> Birthdays </div>
<div class=category> Anniversaries </div>
<div class=category> Newborns </div>
<div class=category> Weddings </div>
</div>
<ul>
<li class="product-filter-items">Birthdays</li>
<li class="product-filter-items">Weddings</li>
<li class="product-filter-items">Newborns</li>
<li class="product-filter-items">Anniversaries</li>
</ul>
I was trying to make a word fill quiz but got stuck in between:
looking to shuffle randomly the list items
If the guess is right then how to get to the next blank
Jsfiddle
$(".btn-container li").click(function () {
let val = $(this).text();
$(".blank:empty:first").html(val);
var optionIndex = $(this).index();
if (optionIndex === blankIndex) {
$(this).prop("disabled", true).addClass('disable');
console.log('right');
} else {
console.log('wrong');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-container">
<p>The bluebird <span class="blank"></span> the <span class="blank"></span> on his <span class="blank"></span></p>
</div>
<div class="btn-container">
<ul id="my_div">
<li>carries</li>
<li>sky</li>
<li>back</li>
</ul>
</div>
here I found easy logic https://stackoverflow.com/a/11972692/6631280
var ul = document.querySelector('#my_div');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}
<div class="content-container">
<p>The bluebird <span class="blank"></span> the <span class="blank"></span> on his <span class="blank"></span></p>
</div>
<div class="btn-container">
<ul id="my_div">
<li>carries</li>
<li>sky</li>
<li>back</li>
</ul>
</div>
What should I do to make this display in a random order every time the page is refreshed.
here's what I added on my WordPress text editor and it displays the images perfectly fine but it does not randomize the order of the divs. What did I do wrong?
<br><br>
<div class="quiz">
<a href="http://www.thequizmania.com/we-bet-you-cant-pass-this-tricky-general-knowledge-quiz/">
<img src="http://i.imgur.com/3YcBoyN.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/what-kind-of-traveler-are-you/">
<img src="http://i.imgur.com/GZn9myC.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/what-two-words-describe-you-as-a-mother/">
<img src="http://i.imgur.com/QnJezBF.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/can-you-pick-the-correct-word/">
<img src="http://i.imgur.com/Pdi9dyo.jpg"></img>
<a>
</div>
<br>
<div class="quiz">
<a href="http://www.thequizmania.com/can-you-pass-this-almost-impossible-shapes-test/">
<img src="http://i.imgur.com/Ov5WdOg.jpg"></img>
<a>
</div>
<br>
<script>
var cards = $(".quiz");
for(var i = 0; i < cards.length; i++){
var target = Math.floor(Math.random() * cards.length -1) + 1;
var target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}
</script>
Your code works fine.
I just:
Fixed <a> tag
Added Jquery library
Here your code on Jsfiddle
You can randomize it with Math.random.
var divContents = ['<br><div class="quiz"><img src="http://i.imgur.com/Ov5WdOg.jpg"></div>', 'second', 'thrid', '4th', '5th', '6th'];
var len = divContents.length;
var parent = document.getElementById('parent');
for(i=0;i<len;i++) {
var random = Math.floor(Math.random()*(divContents.length));
parent.innerHTML += (divContents[random]);
divContents.splice(random, 1);
}
<div id="parent">
</div>
showfavstar(val)
{
this.favstar = true;
}
<ul class="listboxtickets">
<li class="selectlistticket" *ngFor="let fav of favlist" (mouseover)="showfavstar(fav.req_id)" (mouseleave)="hidefavstar()">
<div class="atickname" (click)="timetracker(fav.req_id,fav.ticket_summary,fav.time_logged*60*1000)"> {{fav.ticket_summary.substring(0,20)}} </div>
<div> {{fav.time_logged} </div>
<div class="atickstat" [hidden]="!favstar"> <img class="staraimg" src="assets/images/star_icon.png" (click)="removefav(fav.req_id)"/> </div>
<div class="namelinet"> <img src="assets/images/text_bottomline.png"/> </div>
</li>
</ul>
I want to show star image for only hovered list?Now i get all the star images
This cannot be achived using single variable which you took here i.e favstar.
Try your code like this
<ul class="listboxtickets">
<li class="selectlistticket" *ngFor="let fav of favlist" (mouseover)="showfavstar(fav)" (mouseleave)="hidefavstar(fav)">
<div class="atickname" (click)="timetracker(fav.req_id,fav.ticket_summary,fav.time_logged*60*1000)">
{{fav.ticket_summary.substring(0,20)}}
</div>
<div> {{fav.time_logged} </div>
<div class="atickstat" [hidden]="!fav?.Show">
<img class="staraimg" src="assets/images/star_icon.png" (click)="removefav(fav.req_id)"/>
</div>
<div class="namelinet"> <img src="assets/images/text_bottomline.png"/> </div>
</li>
</ul>
showfavstar(fav){
fav.Show = true;
for(let i = 0; i < this.favlist.length; i++){
this.favlist[i].Show = false;
}
}
hidefavstar(val){
fav.Show = true;
for(let i = 0; i < this.favlist.length; i++){
this.favlist[i].Show = true;
}
}
I'm using the following code for a simple carousel. I'd like to make it repeat after you get to the third quote-item.
Can anyone help? Thank you.
Here's the JS:
<script>
show()
$(function() {
var currentCarousel = 0;
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
currentCarousel = currentCarousel + 1;
setTimeout(function(){ changeCarousel(); }, 8000);
}
changeCarousel();
$('.quote-change').click(function(e) {
e.preventDefault();
changeCarousel();
});
});
</script>
And this is the HTML:
<div class="quote" >
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text one
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text Two...
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text THREE...
</div>
</div>
next
</div>
Try this:
$(function () {
var currentCarousel = 0;
var timeoutID = null;
var timeoutDuration = 2000;
var quoteChange = $('.quote-change');
var quoteItems = $('.quote-item');
var numQuotes = quoteItems.length;
function changeCarousel() {
quoteItems.hide();
quoteItems.eq(currentCarousel).show();
currentCarousel += 1;
if (currentCarousel === numQuotes) { currentCarousel = 0; }
clearTimeout(timeoutID);
timeoutID = setTimeout(function () {
changeCarousel();
}, timeoutDuration);
}
changeCarousel();
quoteChange.click(function (e) {
e.preventDefault();
changeCarousel();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quote">
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1" />
</div>
<div class="quote-text">quote text one</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 2" />
</div>
<div class="quote-text">quote text Two...</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 3" />
</div>
<div class="quote-text">quote text THREE...</div>
</div>
next
</div>
Also you were missing a clearTimeout(); since you have a click handler calling the same changeCarousel() function as well. There is a conflict.
So imagine that by default, your setTimeout keeps calling changeCarousel() recursively and assuming it was right in the middle of another loop (4 seconds) when you decide to click on next button and jump to next carousel item by yourself. Because of that, your newly displaying carousel item will now only stay visible for the remaining 4 seconds but instead it should have had a full 8 seconds stay. Making sense?
Hope you find it useful.
Update your changeCarousel so if currentCarousel >= slides.length it resets to 0
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
if(currentCarousel >= slides.length ){
currentCarousel = 0;
} else{
currentCarousel++;
}
setTimeout(function(){ changeCarousel(); }, 8000);
}