I am relative new to web development so while developing a project site responsive design I ran into a problem that when ever hamburger menu is pressed even though lines for expending exists in external css file but it is not detected but new inine styles are created by javascript and then it works as expected.
HTML:
<nav class="mobileNav" id="mobileMenu">
<a class="mol-6" onclick="show();" href="index.html">
<figure>
<img class="icon" src="images/nav/home.png" alt="">
<figcaption>Home</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="astronomy.html">
<figure>
<img class="icon" src="images/nav/astro.png" alt="">
<figcaption>Astronomy</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="telescope.html">
<figure>
<img class="icon" src="images/nav/tele.png" alt="">
<figcaption>Telescopes</figcaption>
</figure>
</a>
<a class="mol-6" onclick="show();" href="about.html">
<figure>
<img class="icon" src="images/nav/about.png" alt="">
<figcaption>About</figcaption>
</figure>
</a>
</nav>
CSS:
#mobileMenu {
font-family: light, sans-serif;
max-height: 0px;
z-index: 99;
transform: translateY(-100%);
overflow: hidden;
padding: 0px;
transition: transform 0.5s;
}
Javascript:
function show() {
if (document.getElementById("mobileMenu").style.maxHeight == "0px") {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "100%";
document.getElementById("mobileMenu").style.position = "fixed";
document.getElementById("mobileMenu").style.padding = "1%";
}, 1)
document.getElementById("mobileMenu").style.transform = "translateY(0px)";
} else {
setTimeout(function(){
document.getElementById("mobileMenu").style.maxHeight = "0px";
document.getElementById("mobileMenu").style.padding = "0px";
document.getElementById("mobileMenu").style.position = "relative";
}, 500)
document.getElementById("mobileMenu").style.transform = "translateY(-100%)";
}}
Working Example:
Astromuneeb (Require Portrait Orientation)
Any help will be appreciated.
There are better approaches of what you are trying to accomplish. For instance, you could use css classes for styling and use javascript only for switching classes.
I agree with Eugene, but .mobileNav class seems to be overriding your portrait media query.
I added important to your .mobileNav portrait media query but even that won't override it, guess its something to do with hierarchy. It's weird you get display:none; as an inline style on your nav when opening and closing currently, that will not help.
Definitely just set a .open class as Eugene suggested. And use css transforms to do the animation. And just simply add/remove class on the nav.
And when using media queries in css for mobile etc prob best to use screen size etc, and start mobile first...
.mobileNav { display: block; }
#media (min-width: 992px) {
.mobileNav { display: none; }
}
Related
How to make a collapsible navbar if the screen is smaller ?
My code looks like this:
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="">
</a>
<nav class="navbar">
<div class="cart">
Strona główna
Sklep
<a href="cart.html">
<ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
</a>
</div>
</nav>
</header>
First, you will need to add the components that implement a disclosure pattern, i.e. the burger button.
And don’t forget to provide a helpful alt Text for your logo, usually the name visible inside the Logo
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="ACME">
</a>
<nav class="navbar">
<button class="navtoggle" aria-expanded="false" aria-label="Menu"><ion-icon name="menu-outline"></ion-icon></button>
<div class="cart" class="cart--hidden">
…
If you don’t want to use a <button>, you’ll need to apply role=button and make sure that the element is focusable by means of keyboard as well, maybe by tabindex=0.
Then, via CSS Media Queries you can control on which viewport sizes you want to allow users to toggle the menu open and closed.
If you apply Mobile First coding, your basic CSS will be the smallest version, and then min-width queries add layouts for bigger screens. 900px is just an example, you might want to determine that breakpoint depending on the size of your menu.
.cart--hidden { display: none; }
#media screen and (min-width: 900px) {
.navtoggle { display: none; }
.cart--hidden { display: block };
}
Finally, you’ll need to bind to the click event to change the toggle-status in JavaScript.
const toggle = document.querySelector('.navtoggle');
const cart = document.querySelector('.cart');
toggle.addEventListener('click', () => {
if (toggle.ariaExpanded === "true") {
toggle.ariaExpanded = "false";
cart.classList.add('cart--hidden');
} else {
toggle.ariaExpanded = "true";
cart.classList.remove('cart--hidden');
}
});
.cart--hidden { display: none; }
#media screen and (min-width: 900px) {
.navtoggle { display: none; }
.cart--hidden { display: block; }
}
<header class="header">
<a href="#" class="logo">
<img src="images/logo.png" alt="ACME">
</a>
<nav class="navbar">
<button class="navtoggle" aria-expanded="false">Menu</button>
<div class="cart cart--hidden">
Strona główna
Sklep
<a href="cart.html">
<ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
</a>
</div>
</nav>
Beware again, that if you don’t use a <button> for the toggle, you will need to bind keydown handlers as well. Browsers do that by default for certain interactive elements.
You not really clear as to what you want to do. So it depends on what you are trying to accomplish. Maybe this will help get put you in the right direction:
CSS Files
//Media Query to run block of CSS code when viewport is at set width
//Mobile
#media screen and (max-width: 768px) {
// Makes it disappear
nav {
display: none;
}
.some-class {
render hamburger menu maybe...
display: block;
}
//Tablet
#media(max-width: 1024px) and (min-width: 768px) {
nav {
display: block;
}
.some-class {
display: hidden;
}
}
I would recommend looking into some documentation. I have found W3 schools is a good place to look for easy reference.
W3 Schools Media Query
I have a style for image button :
.sticky {
position: fixed;
top: 50px;
width: 120%;
z-index: 1;
}
#media screen and (min-device-width : 100px) and (max-width: 600px) {
.sticky{
display:none;
}
}
and script for these:
window.onscroll = function() {
myFunction();
}
var backarrow = document.getElementById("back");
var sticky = backarrow.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
backarrow.classList.add("sticky");
} else {
backarrow.classList.remove("sticky");
}
}
it actually works! But I do not understand why Clicking is disabled for FireFox while other browsers do not have problems with it. z-index is set to 1 but other browsers are fine with it but FF. what I can do about it and how to fix it?
Thank you very much who knows!
I just did this for image buttons links:
<a href="#top" <a href="#wrap"
Supposed to work for any browser. This even not a script. but probably not good css enough that I have.
'>
<img alt="" class="mainlogo" src='data:image/png;base64,<?php echo base64_encode(file_get_contents("******.png")); ?> '>
<button class="right"> <img alt="" id="forward" class="logo" style='max-width: 40px;' src='data:image/png;base64,<?php echo base64_encode(file_get_contents("*****/Pictur3.png")); ?> '> </button>
I solved the problem!!!!!!!!!!
What I did is used my button id for my jquery script insted of img id. Thus, entire button would scroll down insted of only image and therefore I could implement
<button onClick="location.href = '#top'"
insted of any
<img onclick or <href onclick
events that I tried and do not work.
Hope it helps anybody too as example:)
I have VERY recently started coding and been asked to code our company website from scratch.
I have coded a team page on the website with a PNG of each member of the team. At the moment when the user hovers over any of the PNGs they turn into a little animated GIF of them waving/doing something.
This is the javascript:
$(document).ready(function()
{
$("#imgAnimateBeth").hover(
function(){
this.src = "images/Team/Videos/Beth.gif";
},
function(){
this.src = "images/Team/Static-shots/Beth.png";
}
);
});
The issue I am having is that I also want to introduce a click state that would bring up a popup with a video of that person and their job description but I can't get it to work.
I have tried creating a CSS overlay but it refuses to work alongside the hover effect (JavaScript) so my assumption is that they don't play well together (??).
Below is the HTML for the section above. Can anyone enlighten me as to how this could be done? Simple language please!
<div class="teamsection">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
<img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
<img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
<img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
<img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
<img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
<img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
<img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
<img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
<img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
<img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
<img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
<img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
<img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
<img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
<img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>
Also, if you need me to upload anything else, just shout.
The CSS overlay was like this:
The CSS code overlay was like this:
.popup {
display: none;
position: fixed;
padding: 30px 70px;
width: 700px;
height: 100%;
z-index: 20;
left: 50px;
top: 20px;
background: rgba(0, 0, 0, 0.9);
overflow: scroll;
}
With a little bit of Javascript:
$ = function(id) {
return document.getElementById(id);
}
var show = function(id) {
$(id).style.display ='block';
}
var hide = function(id) {
$(id).style.display ='none';
}
And I basically did this to the HTML:
<div>
<a href="javascript:void(0)" onclick="show('beth')">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
</a>
</div>
<div class="popup" id="beth">
<div class="close-button">
<i class="fa fa-times" aria-hidden="true"></i> Close
</div>
<h4>CONTENT HERE</h4>
</div>
Maybe this will give you some ideas:
var members = document.querySelectorAll('.team-member');
members.forEach(function(member) {
member.addEventListener('mouseenter', memberShowGIF);
member.addEventListener('mouseleave', memberShowPNG);
member.addEventListener('click', memberVideo);
});
function memberShowGIF(event) {
this.src = this.dataset.gif;
}
function memberShowPNG(event) {
this.src = this.dataset.png;
}
function memberVideo(event) {
console.log('The video thing for: ' + this.id);
}
<div class="teamsection">
<img id="Beth" class="team-member"
src="https://via.placeholder.com/200?text=Beth.png"
data-png="https://via.placeholder.com/200?text=Beth.png"
data-gif="https://via.placeholder.com/200?text=Beth.gif">
<img id="Kiemia" class="team-member"
src="https://via.placeholder.com/200?text=Kiemia.png"
data-png="https://via.placeholder.com/200?text=Kiemia.png"
data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>
The most important learnings here are:
querySelectorAll (as a vanilla alternative to jQuery for selecting nodes)
addEventListener
Data attributes
I'm trying to set up a simple gallery with thumbnails and a main content section. When a thumbnail is clicked, I would like a larger version of the image along with text to display in the main content section. I've got the code for the images down, but can't figure out how to add text on each click. I haven't started doing any styling yet, but the basic code is below. Any help would be much appreciated.
Thanks!
JavaScript:
var mainImg = document.getElementById('Main');
document.getElementById('One').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297';
mainImg.innerHTML = imagetitle;
//alert('one clicked');
};
document.getElementById('Two').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297';
mainImg.innerHTML = 'imagetitle';
//alert('two clicked');
};
document.getElementById('Three').onclick = function() {
mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297';
//alert('two clicked');
};
CSS:
#One, #Two, #Three {
width:100px;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}
#One:hover, #Two:hover, #Three:hover {
width:100px;
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
HTML:
<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" />
http://jsfiddle.net/f9B8H/72/
Let's clean this up a bit.
HTML
<div id="container">
<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<p id="caption"></p>
</div>
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="I'm a soldier" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="My family" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="Dad" />
Notice how I've stored the caption in the alt attribute. A data attribute could also work.
JAVASCRIPT
function displayImage() {
var mainImg = document.getElementById('Main');
var caption = document.getElementById('caption');
mainImg.src = this.src;
caption.innerHTML = this.alt;
}
document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
document.getElementById('Three').onclick = displayImage;
Fiddle: http://jsfiddle.net/g2hY4/
The simplified function works so well because you are using the same image for thumbnail as main image. If you didn't do that, we could store the big image address in a data attribute also.
Here's one way to load the first caption when the page loads. Put it after the code I've already shown you:
displayImage.call(document.getElementById('One') );
You can read about call here. In a nutshell, it redefines the value of this in the displayImage function.
New fiddle
Something to think about is where you want the caption and how it's styled can be set in CSS. I've left that to you also. Absolute positioning will work if the positioning of #container is set to relative.
My implementation gets the text from the attribute alt(could be title) I think this way can be more elegant
document.getElementById('textSubtitle').innerHTML = this.alt;
http://jsfiddle.net/WKfc5/
If you are okay with using jQuery, here is something that I made up real quick. I hope it is useful. [Fiddle]
HTML
<div id="gallery">
<div class="preview">
<img class="previewImg" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="" />
<div class="previewText"></div>
</div>
<div class="thumbnails">
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="Image 1" />
</a>
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" title="Image 2" />
</a>
<a href="javascript: void(0);">
<img src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" title="Image 3" />
</a>
</div>
</div>
CSS
#gallery {
overflow: hidden;
}
#gallery .preview {
float: left;
position: relative;
}
#gallery .previewImg {}
#gallery .previewText {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 100px;
background: rgba(0,0,0,0.7);
color: #fff;
font: normal 12px arial;
padding: 10px;
}
#gallery .thumbnails {
float: left;
width:100px;
}
#gallery .thumbnails a, #gallery .thumbnails img {
display: block;
}
#gallery .thumbnails a img {
width: 100%;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}
#gallery .thumbnails a:hover img {
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
JS
$(function(){
var gallery = $("#gallery"),
thumbnails = gallery.find(".thumbnails a"),
previewImg = gallery.find(".previewImg"),
previewText = gallery.find(".previewText");
thumbnails.on("click", function(e){
var thumbImg = $(this).find("img");
previewImg.attr("src", thumbImg[0].src);
previewText.html(thumbImg[0].title);
});
});
I'd call the onclick from the image itself instead of adding the onclick via JS to the image.
You're doubling your work.
Where do you want the text to be displayed?
If it has to be displayed on top of the image, you'll have to make the image a background-image of a div or so.
If the text has to be above/under the image, place a span above/under the image and give it an ID.
Working with a span
JS:
function showBig(srcBig, title) {
var mainImg = document.getElementById('MainImg');
var mainText = document.getElementById('MainText');
mainImg.src = srcBig;
mainImg.title = title;
mainText.innerHTML = title;
}
HTML:
<div id="main">
<span id="MainText">Title will come here</span>
<img src="Default Img" alt="Big img's will come here" />
</div>
<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />
Working with BG-image
JS:
function showBig(srcBig, title) {
var mainDiv = document.getElementById('MainDiv');
MainDiv.style.backgroundImage = srcBig;
MainDiv.innerHTML = title;
}
HTML:
<div id="MainDiv">
</div>
<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />
By the way, you can ofc still add the onClicks via JS:
document.getElementById("yourImg").onclick = showBig('URL of Big', 'Title');
By the way, Don't use the same img for the thumbnails.
You'll probably use some big images which takes longer to load and then display it much smaller via CSS.
Make a smaller version (e.g. 100x100px or whatever size the thumbs should be) and only load the bigger version when the onClick is called.
Also, you better use a CSS-class like .thumbs to style the thumbs.
Otherwise you'll have to add a new ID to the list in your CSS file everytime you add a new image.
JSFiddle
I've got some social media icons that I'd like to change color when they're hovered over. I figured the easiest way to do this is by replacing the image with a new one (they're small png files). What do you suggest? A dynamic function would be ideal.. there are four icons, each of which has a filename of demo.png, demo_hover.png. I'm using the jQuery library.
Thank you!
HTML
<a class="a" id="interscope_icon" href="http://www.interscope.com/" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a>
<a class="a" href="http://www.twitter.com/FernandoGaribay" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a>
</p>
<p>
<a class="a" href="http://www.facebook.com/f2inc" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a>
<a class="a" href="http://www.myspace.com/f2inc" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a>
</p>
jQuery
$('#interscope_icon').hover(function(){
$('#interscope').attr('src', 'Images/icons/interscope.png');
});
You're probably better off using the 'CSS sprite' method rather than loading a new image...
http://css-tricks.com/css-sprites/
The easy way is to do it the CSS way:
#interscope_icon { background-image: url(...) }
#interscope_icon:hover { background-image: url(...) }
I just had this dilemma as well so came up with my own method. Super easy, works great and no need for sprites, just an transparent PNG:
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
http://jsfiddle.net/mattmagi/MpxBd/
Let me know what you think.
I would give the social icons as the background-image on the anchors (with display: inline-block;) instead of as <img /> elements inside the anchors.
Then simply define an a:hover state that changes the CSS to a different background. Perhaps even sprite them.
Something like this:
#some_id { background-image: url(...); }
#some_id:hover { background-image: url(...); }