I'm having a styling issue with my website. So I have 3 different sections for my navbar. First being for socials, second having my company logo, and third having web-page links.
As you can see from the first image, they're all supposed to be white and have the hover effect (this all works completely fine for the home page).
For the other three pages however I have a change of design and would like to make all my links in the navigation bar black, in doing so I have used the 'invert' feature in my css. However, when I try to change the filter for all images and links, they're split into "social-icon", "logo-white" for the company logo, and "nav-link" for the web page links. The issue I am having with it is for some reason when I click to the change the page, it only effects the 'invert' on the first image of each part (so the first social media icon, the company logo and the first web page link), as well as this, it completely takes the hover effect away from the images and links that have changed too. I've been messing around with 'foreach' statements but can't seem to get it to work at all.
//loads work page
function workPage() {
document.getElementById("landing-page").style.display = "none";
document.getElementById("work-page").style.display = "block";
document.getElementById("about-page").style.display = "none";
document.getElementById("contact-page").style.display = "none";
document.getElementById("social-icon").style.filter = "invert(100%)";
document.getElementById("logo-white").style.filter = "invert(100%)";
document.getElementById("nav-link").style.filter = "invert(100%)";
}
#social-icon {
filter: invert(0%);
transition: filter .3s;
}
#social-icon:hover {
filter: invert(50%);
}
<!-- navigation bar -->
<div class="nav-bar">
<!-- socials -->
<div class="socials-container">
<!-- instagram -->
<div class="social-icon-container">
<a href="#">
<img src="images/instaLogo.png" alt="Instagram Link" class="social-icon" id="social-icon">
</a>
</div>
<!-- tiktok -->
<div class="social-icon-container">
<a href="#">
<img src="images/tiktokLogo.png" alt="Tiktok Link" class="social-icon" id="social-icon">
</a>
</div>
<!-- youtube -->
<div class="social-icon-container">
<a href="#">
<img src="images/youtubeLogo.png" alt="YouTube Link" class="social-icon" id="social-icon">
</a>
</div>
</div>
<!-- company logo -->
<div class="company-logo-container">
<div class="logo-container">
<a href="home.html">
<img src="images/logo.png" alt="white company logo" id="logo-white">
</a>
</div>
</div>
<!-- page links -->
<div class="page-links-container">
Home
Work
About
Contact
</div>
</div>
Home page with normal filter and hover effect:
Work page with changed filter and broken hover effect:
im not a fan of inline css so try this:
let elements = document.querySelectorAll('.social-icon')
elements.forEach((el) =>{el.classList.add('filter')})
and add in css:
.social-icon.filter{invert(100%)}
or if you want to use inline styles:
document.querySelectorAll('.social-icon').forEach((el) =>{el.style.filter = "invert(100%)"})
Related
If I have an object like this on a specific website:
<div class="header">
<h1>Welcome to the site</h1>
<p>Foo bar baz spam</p>
</div>
Is there a way to make an element on my site display the content of the first div with that class?
For example, on https://stackoverflow.com, there's a div with the class "-container" near the top of the page.
<header class="top-bar js-top-bar _fixed">
<div class="-container">
<div class="-main">
<a href="https://stackoverflow.com" class="-logo js-gps-track"
data-gps-track="top_nav.click({is_current:true, location:1, destination:8})">
<span class="-img _glyph">Stack Overflow</span>
</a>
<!-- More data follows -->
So, on my site, let's say I had a special element with a certain class that specified the website and class to pull from. The HTML would look like this:
<div class="mySpecialClass">
<div class="-main">
<a href="https://stackoverflow.com" class="-logo js-gps-track"
data-gps-track="top_nav.click({is_current:true, location:1, destination:8})">
<span class="-img _glyph">Stack Overflow</span>
</a>
<!-- More data follows -->
</div>
Is there a way to do this with HTML, CSS, PHP or similar?
I am implemeting a system where the user clicks on an image and is redirected to another website. Before redirecting a modal dialog appears and confirms that they will be redirected to another website.
The images are added dynamically from the back-end by the client and the client adds a unique service link to each image resulting in:
<!-- image #1 -->
<a href="#openModal"> <!-- opens the modal dialog -->
<div class="service">
<img src="img.png"> <!-- unique image -->
</div>
</a>
<!-- image #2 etc -->
<a href="#openModal"> <!-- opens the modal dialog -->
<div class="service">
<img src="img2.png"> <!-- unique image -->
</div>
</a>
<!-- clicking on image #1 -->
<div id="openModal">
<p>You will be now redirected to the service provider home page</p>
Order<!-- link entered in the back end of service that is unique with each service provider image -->
</div>
How could I achieve this without knowing a certain ID to each image?
Thanks O.
Can you please take a look at below fiddle link:
https://jsfiddle.net/pw8w1x6d/4/
HTML Code:
<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
<div class="service">
<img src="img.png"> <!-- unique image -->
</div>
Open Modal</a>
<!-- image #2 etc -->
<a href="#openModal" class="openlink"> <!-- opens the modal dialog -->
<div class="service">
<img src="img2.png"> <!-- unique image -->
</div>
Open Modal</a>
<div id="openModal" class="modalDialog">
<div> X
<div class="selectedImage"></div>
Submit
</div>
</div>
jQuery Code:
$(document).ready(function(){
$(document).on("click", ".openlink", function(){
var imagePath = $(this).find("img").attr("src");
$(".selectedImage").text(imagePath);
});
});
Bascally I have a fixed navbar with same page anchors and I'd like to keep the link active after the link has been clicked and taken to that section of the page. This is simple if the links to another page but I can't figure out how to here.
Here's what I've got. I'll just show you guys the first link and section since the solution will most likely be the same for the following links. I haven't written any CSS because I'm not sure how to go about this.
<nav id="navbar" class="navbar">
<div id="navContent" class="areaMargin navContent row">
Scheduling
</div>
</nav>
<section id="schedWrapper" class="bgWrapper ">
<img class="bgImg" src="images/bg/scheduling-bg.jpg">
<article id="schedContent" class="areaMargin fittext">
<header class="top">
<div class="col1"><h1>A New Way<br />To Schedule<br />Everything</h1></div>
<div class="col2"><img src="images/scheduling-client-group-event.png"></div>
</header>
<div class="clearfix"></div>
<div id="schedBottom">
<p>One calendar that lets you manage schedules for your team<br />
and your spots, all in one calendar, with options of sharing your<br />
own personal schedule, and you can accept and decline<br />
appointments with any device.</p>
</div>
</article>
Using jQuery you can simply toggle an active class on links:
$('#navContent a').click(function(){
/* remove class from prior active link*/
$('.activeLinkClass').removeClass('activeLinkClass');
/* "this" is current link clicked*/
$(this).addClass('activeLinkClass');
});
I have found this javascript plugin that puts images into a responsive grid which will expand a large view of the image on click (like google images). I want to modify the structure of the large view to display multiple images instead of one large image.
Is there a way I change this code so that the largesrc attribute is not just a link to a single image but an array of images?
html;
<ul id="og-grid" class="og-grid">
<li>
<a href="http://example.com" data-largesrc="img/example.jpg" data-title="Example Title" data-description="Example Description">
<img src="img/example.jpg">
</a>
<div class="og-expander">
<div class="og-expander-inner">
<span class="og-close"></span>
<div class="og-fullimg">
<div class="og-loading"></div>
<img src="img/example.jpg">
</div>
</div>
<div class="og-details">
<h3>Example Heading</h3>
<p>Example Description</p>
Visit website
</div>
</div>
</li>
</ul>
js;
// update preview's content
var $itemEl = this.$item.children('a'),
eldata = {
href: $itemEl.attr('href'),
largesrc: $itemEl.data('largesrc'),
title: $itemEl.data('title'),
description: $itemEl.data('description')
};
I am not sure your plugin will do that or not but looks like there are a couple of lightbox plugin which can do this.
http://css-tricks.com/forums/discussion/12174/lightbox-with-multiple-images/p1
I am using a theme for Wordpress that has fancybox already included in it. Everything works fine, smooth and clean, the way it's supposed to.
Now there is something I'd like to do, and unfortunately I don't have the knowledge for it:
When clicking on the 1st thumbnail of my publicated post, a fancybox slideshow appears and displays all the thumbnails. Cool enough, but I'd like this slideshow to display more than just those thumbnails.. Something like 10 or 20 files maybe, hosted locally.
I believe there's a way to do this, I found this code fragment on another question ( Fancy box - how to show slideshow from a single thumbnail ) but just couldn't make it work, no matter how hard I tried (I can more or less "read" codes, but writing it is not yet something I can do!)
So yeah, to put things simply, I'd like my "post1" fancybox to display X pictures, other than the thumbnails. And also, be able to repeat this trick with X different posts, so I need to find a clean way to do it, not just some structure trick. I tried to include the above code in the html part of my post, but just didn't work.
Feel free to answer! And let me know if you need more info!
I believe this is the interesting part of my HTML's post:
<div id="product-slider">
<div id="product-slides">
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
</div> <!-- #product-slides -->
<div id="product-thumbs">
<a href="#" class="active" rel="1">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span>
</a>
<a href="#" class="last" rel="2">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span>
</a>
</div> <!-- #product-thumbs -->
</div> <!-- #product-slider -->
After reading several questions, external links and more, this is how I figured out my issue, and how I believe it works: (Sorry if it sounds quite basic, but I'm just gonna explain it the way I would have liked to read it! Newbie language: ON)
Since fancybox is already activated by my WP theme, there is no need for me to call it in my HTML code on my post. When checking my source code on my post (with 1 thumbnail and no code added), I see this code generated:
<div id="product-slider">
<div id="product-slides">
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
</div> <!-- #product-slides -->
Therefore my "rel" value for the slideshow is "gallery". Now, I just need to add as many files as I wish in my post for the slideshow to display them, with the following code:
<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>
And that's it, I can add as many pictures as I wish, whilst none of them are displayed as thumbnails! Anyway, thanks to Toni and Janis for their help, if this answer doesn't help anyone else, at least I'm happy to have this working the way I wanted!