So I'm trying to get this going on a bootstrap build, where on one page there are clickable states, however, these will go to a specific slide on another page.
I'm still having a tough time understanding this. My buddy, who's a Javascript developer wrote out some code, but I can't make sense of it.
<script>
function goToSlide(x) {
console.log('going to slide '+x)
$("#myCarousel").carousel(x);
}
</script>
so from page 1, click, goes to specific slide on page 2
If it's only one link going to another slide on the other page I would try something like this:
function goToSlide() {
document.location.href = page2.html;
var div = document.getElementById("slide2");
div.className = "item active";
var otherDiv = document.getElementById("slide1");
otherDiv.className = "item";
}
Take a peek at the carousel methods:
http://getbootstrap.com/javascript/#carousel-usage
You would probably want to use .carousel(number), in conjunction with URL parameters or hash tags as #Lukas mentioned above. Just watch for the hash/parameter in the URL, and have the carousel load with that slide active.
Related
So the thing is that I want to click a button on ./page.html so it opens ./index.html and the animation starts.
Pages are same domain
I don't want animation to start every time I open the ./index.html only when I click the button
I'd like it to be vanilla JS solution but jquery is ok
the main problem I can't solve is that I trigger button with specific id and the console says "Cannot read properties of null (reading 'addEventListener')"
In other words in ./index.html I have a nav bar with links but one of the sections mentioned in nav bar is already present in ./index.html so I decided to highlight it with animation when I click that link. On ./page.html I still have same nav bar with same links (surprise) but this time I want when I click that button to open ./index.html first and then play the animation to highlight that section
I tried different solutions including setting a delay, using localStorage and iframe but none of these worked for me (or I was using them wrong)
Here's the minimization of the code
./index.html (section with class skills is the element where I want the animation to play)
<nav>
<a id="skills-button-main" class="buttons corner-nav" href="#">skills</a>
</nav>
<section class="skills" id="skills-panel">
</section>
./page.html (button that I want to click so the animation on ./index.html plays)
<nav>
<a id="skills-button-projects" class="buttons" href="./index.html">skills</a>
</nav>
JS (this is how I make animation play every time I click on #skills-button-main in ./index.html)
if(document.getElementById("skills-button-main")){
$("#skills-button-main").click(function() {
const el = $("#skills-panel").addClass("skills-animation");
setTimeout(function() {
el.removeClass("skills-animation");
}, 2000);
})};
}
JS (this is one of the variation I tried to do same thing but with loading ./index.html page first)
if (document.getElementById("skills-button-projects")){
document.getElementById("skills-button-projects").addEventListener("click", function() {
window.location.href = "./index.html";
if(document.getElementById("skills-button-main")){
$("#skills-button-main").click(function() {
const el = $("#skills-panel").addClass("skills-animation");
setTimeout(function() {
el.removeClass("skills-animation");
}, 2000);
})};
});
}
I'm using if statement at start because it's the same .js file so the script runs even if ID's doesn't exist on current html
Please somebody help
i hope this answer could help you.
with document.referrer you can get previous page that refer you to current page.
and with performance.navigation.type you can check that page was not reloaded.
window.performance.navigation property is deprecated and you can use this answer to improve your code if you want . i did not use it for a simpler answer.
window.addEventListener('load', ()=>{
const section = document.getElementById('skills-panel');
if(!performance.navigation.type && document.referrer.includes('/page.html')){
section.classList.add('add')
section.addEventListener('animationend', ()=>{
section.classList.remove('add')
})
}
})
i put the whole codes on animateafterload.w3spaces.com
I'm currently using the following JS to open an accordion when an <a> tag is clicked. It uses the data-trigger value to determine what <a> to use.
<script type="text/javascript">
$('[data-trigger="accordion"]').on('click', function(e) {
var obj = $(this),
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $('.content.1', '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
});
</script>
This above JS will open an accordion based on it's class. Below is an example of the link that is used to open the Accordion:
<a href="#protect-the-nhs" data-trigger="accordion">
An example of the code that it is referencing to open the accordion:
<div id="protect-the-nhs" class="content 1">
I was wondering if anyone can help me change this code so that I can reuse it for each Accordion on the page. Let me explain. The page has 5 different accordions, above I have used generic naming for the data-trigger and the accordion class "content 1".
I'd like to know if it is possible to somehow make it so I can use this code for each different accordion (So for example accordion 1 would have a class of "content 1", accordion 2 would have a class of "content 2" etc. However, for each accordion, there would also be a different link you have to click to open the accordion.
For example: Accordion one would rely on an <a> tag with data-trigger="accordion1" and it would open the accordion with class="content 1".
I hope someone understands my ask and might be able to help! I've tried looking for something for this but haven't found anything. I'm still learning JS so TIA.
Thanks.
My basic idea is to listen to the entire document, determine where got clicked and activate the correct accordion
PLEASE NOTE: I'm assuming that every accordion has a number right after it that corresponds to the content classes like accordion1 content 1
document.onclick=function(e) {
if(!e.path[0].dataset.trigger){return;} //i forgot that not every element has a data-trigger
if(!e.path[0].dataset.trigger.startsWith('accordion')){return;} //listening to the whole document needs you have to ensure you aren't activating when you don't need to
var n=e.path[0]["data-trigger"].split('accordion')[1]
alert(n)
var obj = e.path[0],
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $(`.content.${n}`, '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
}
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 trying to put a photo view/slideshow on my webpage and I am not getting the results I am looking for. I have created a Fiddle HERE to show you what I am trying to do. What I want it to do is when you click a thumbnail it switches the thumbnail into the main photo spot and the main photo into the thumbnail spot. It works at first but after you start clicking the other thumbnails it starts not switching the correct photo into the main slot. Also if you reclick the thumbnail you just clicked it does nothing. Here is my jquery code but take a look at my fiddle and you will be able to see what I am trying to do.
$('.thumb1').click(function() {
$('.thumb1, .main').fadeIn().toggleClass('thumb1 main');
});
$('.thumb2').click(function() {
$('.thumb2, .main').fadeIn().toggleClass('thumb2 main');
});
$('.thumb3').click(function() {
$('.thumb3, .main').fadeIn().toggleClass('thumb3 main');
});
$('.thumb4').click(function() {
$('.thumb4, .main').fadeIn().toggleClass('thumb4 main');
});
I changed your classes similarly to how Joao did, but my JavaScript is a little different
$('.thumb').click(function () {
var newHTML = this.innerHTML;
this.innerHTML = $('.main')[0].innerHTML
$('.main').html(newHTML);
});
Instead of just changing the src, you will also keep all other attributes of the images, such as the alt attribute, which you should add to your images for accessibility purposes.
I didn't implement the idea of not having clicking the same one do nothing, because then if they want to look at the image they just looked at they can't.
JSFiddle: http://jsfiddle.net/howderek/RfKh4/6/
I was looking at your code, and I wouldn't recommend switching around classes between elements like that since it might throw out a couple of bugs like yours. I played around with your code and simplified a little bit:
$('.thumb').click(function () {
var previousSrc = $('.main').children().attr('src');
$('.main').children().attr('src', $(this).children().attr('src'));
$(this).children().attr('src', previousSrc);
});
Here's the updated fiddle: http://jsfiddle.net/RfKh4/5/
Basically what I did was save the previous src attribute of the .main div image inside previousSrc and then I change the div's image to the one in the thumbnail. And finally change the thumbnail's image to the one that was on the .main div. Hope it helps you!
I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});