I'd like to have a different logo on each "page" of my single page website http://goo.gl/16XdA (each page has a separate div). Is it possible, and how? Many thanks
That site is pretty nice, I don't understand why changing the logo would be hard for you.
Here is a simple way to do it, there are many.
<li class=""><a onclick="changeLogo();" href="#team">Team</a></li>
<script type="javascript/text">
function changeLogo(){
var logoImg = document.getElementById("logo").children[0];
logoImg.src = "newsource.jpg";
}
</script>
I would suggest pre-loading the various logos so that the switch is instantaneous.
What have you try? You can add event to your navigation: when user click on nav item, it change your current logo...
Something like this
$('#nav li').click(function(){
var selected = $('a', this).attr('href'); // This will return current item # like #team, #activities...
#change your logo based on selected
$('#logo img').attr('src', 'your url');
});
You can do this several ways with javascript. I'd shift the background position of a sprite-format image on the click event using jQuery or change the source of the image url altogether. Another method is to just add your individual logos to each of those nicely animated backgrounds you have going there (if you don't mind making the logos page-specific).
http://api.jquery.com/click/
http://api.jquery.com/css/
You can find which of your divs are currently visible
Check if element is visible after scrolling\
and then set the image in your logo div based on that.
Related
I really need help with this. I'm building a slider with swiper js
I have a product with few options, the idea is to filter the images that don't match with the option selected.
I know swiper has a lot of method and events, but the closest I found was the removeSlide and add/append Slide, which eliminates the element from the DOM. So I did it with plain javascript, hidden the images with css like this:
if (event.target.name.includes("Color")){
images.forEach((image)=>{
if (!image.dataset.thumbColor.includes(color)){
image.classList.add('hidden');
swiper.swiper.update();
swiper2.swiper.update();
}
});
thumbs.forEach((thumb)=>{
if (!thumb.dataset.thumbColor.includes(color)){
thumb.classList.add('hidden');
} else {
thumb.addEventListener('click',()=>{
swiper2.swiper.slideTo(thumb.dataset.slideNum);
})
}
});
}
The problem whit this (like you can see in the link below) is that after the first filter, when you click a thumb image it doesn't send you anymore to the correct image.
https://e9ef6jlcbp604898-59185856680.shopifypreview.com
You may need to try swiper.update() after manually manipulating your slides.
Ref: https://swiperjs.com/swiper-api#method-swiper-update
I've got a webpage in which I need to create a button that will switch the image displayed,
the image is a schematic of a building so I will need a button to select between levels, level 1, 2 ect...
On top of that I need a button that will toggle another image relative to the current image displayed on page, this image will toggle some extra details inside the image, but the button only has to link to another image file so thats no drama.
Any help will be appreciated as I have followed a few ideas with no success.
I'm thinking javascript would be easier for this project.
Thanks again.
I think the easiest way for a beginner is to use it this method:
For example you have a folder with images. And you have a page with one image that you want to switch and a button that will toggle it.
This is not functional example but it might give you an idea:
HTML:
<img src="img/img01.jpg">
<button id="toggler"></button>
JS:
var button = document.querySelector('#toggler');
button.onclick = function(){
var img = document.querySelector('img');
img.src = "new img url"
}
Now, jQuery might be easier way for you to do this, but it is not very different from this example.
reading a lot of posts and answers about accessing content of an iFrame,
I try and combine these to my particulair case.
Unfortunately I can't get it to work, so maybe I'm missing some mental ability to add the dots ;)
What I try to do is as follows:
The page loaded in my IFrame (same domain) contains a menu, where my active items have class="menuactive" data-rel="SomeName". My parent page contains a div with links (#portfolioslider) that have id's corresponding to the data-rel attributes of the links in the iFrame.
So where in the iframe the links are for instance Fashion, on the parent page my elements are <span id="Fashion">Fashion</span>, on which I want to add a class class="active" at the same time as my iFrame reloads and adds the class="menuactive" to a menu item.
This seems the most logical approach:
Javascript in pages loaded in iFrame:
$(function() {
$('div.menu a.menuactive').ready(function() {
$(window.self.top).contents().find('#portfolioslider a').each(function() {
$(this).removeClass('active');
$('#$(this).attr('data-rel')).addClass("active");
});
});
});
Bit this doesn't work at all,
I wished I could make a jsFiddle but I can't seem to find out how to construct an iFrame there.
Any thought would be greatly appreciated!, thanks guys
kind regards,
Jeroen
Yeh!
I fixed it, using:
$('div.menu a').click(function() {
$('a.active', window.parent.document).removeClass("active");
$('#' + $(this).attr('data-rel'), window.parent.document).addClass("active");
});
Cheers,
Jeroen
The above-show code works fine excepting the following case. When I open web-page, the content of DIV container is empty and I can see just the navigation menu. Once I press on menu or submenu items, the content is filled with correct data. So, my question is how to use the DIV container 'submenu11' by default? The code line $active = $('#submenu11').addClass('active'); does not solve this issue.
Look at jFiddle.
Can you add css to the fiddle? I am not understanding the question completely.
From what I understand you want to show the submenu11 by default right? so I am assuming the rest of the stuff should be hidden which I assume it is done in the css already. your code
$active = $('#submenu11').addClass('active');
does not do anything because you are assigning it to $active
I think you are looking for something like this maybe?
$(document).ready(function() {
$('#submenu11').addClass('active');
});
this is assuming all your css classes are defined correctly
$(document).ready(function() {
//code for ajax calling
$('#submenu11').addClass('active').trigger('click);
});
I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)
Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.
I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.