sorry for my English...
I to try an image zoom as here to say, it working (the image zoom) without <header> Tag.
Width the <header> tag
When getting with the Maus on the image, the image disappears.
Here I can show how to build my Html code.
$('.wrapper').on('mouseenter', function() {
$('.img').css({
transform: 'scale(2.5)'
});
});
$('.wrapper').on('mouseleave', function() {
$('.img').css({
transform: 'scale(1.0)',
backgroundPosition: 'center center'
});
});
$('.wrapper').on('mousemove', function(e) {
$('.img').css({
backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px'
});
});
.row {
margin: 10px;
}
.wrapper {
width: 300px;
height: 300px;
border: 1px solid navy;
overflow: hidden;
}
.img {
width: 100%;
padding-bottom: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="log">
<img id="logo" src="/kalamulur/Photo/my-logo5.png" alt="">
</div>
<div class="linken">
<ul class="linken_ul">
<li class="dropdown">
<i>Home</i>
</li>
<li class="dropdown">
<i>Taschen & Rucksäcke</i>
<div class="dropdown-content">
<i>Taschen, Tablettaschen & Computertaschen</i>
<i>Rucksäcke</i>
<i>Beutel</i>
<i>Gürteltasche, Mäppchen & Schnupftabakdose</i>
</div>
</li>
<li class="dropdown">
<i>Haus</i>
<div class="dropdown-content">
<i>Dekoration</i>
<i>Teppich</i>
<i>Yogamatten & Necessaire</i>
</div>
</li>
<li class="dropdown">
<i>Kleidung</i>
<div class="dropdown-content">
<i>T-Shirts für Frauen & Männer</i>
<i>Hösen für Frauen & Männer</i>
<i>Schals, Mützen & Hute</i>
<i>Sandalen</i>
</div>
</li>
<li class="dropdown">
<i>Schmuck</i>
<div class="dropdown-content">
<i>Ringe, Ohrringe, Ketten ...</i>
</div>
</li>
<li class="dropdown">
<i>Über uns</i>
<div class="dropdown-content">
<i>Über uns</i>
<i>Kundenservice</i>
</div>
</li>
<li class="dropdown">
🌍 English
<div class="dropdown-content">
Spanisch
</div>
</li>
</ul>
</div>
</header>
<main>
<div class="wrapper">
<div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
</div>
</main>
I too tried with and without <header> Element, and to show which only working without <header> Element....
Can please someone help me and say where is my mistake? , Thanks!
Your code works, fine, if you had give your wrapper bigger size you would have seen your img does not lose it self but moves up behind header.
Problem was here in your js: backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px'
This positioned your zoomed image behind header. If you remove it shows in box and zooms but does not update zoom on mouse movement.
I tired to play around with this but I couldn't make it work and I don't have any time for this anymore. So i am leaving this answer here maybe someone else has an idea.
I tried to play around with this:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX
I could make mouse to react only for inside wrapper but I couldn't make the picture work to react to this.
Good luck.
$('.wrapper').on('mouseenter', function() {
$('.img').css({
transform: 'scale(1.5)'
});
});
$('.wrapper').on('mouseleave', function() {
$('.img').css({
transform: 'scale(1.0)',
backgroundPosition: 'center center'
});
});
$('.wrapper').on('mousemove', function(updateDisplay) {
var box = document.querySelector(".wrapper");
var pageX = document.getElementById("x");
var pageY = document.getElementById("y");
function updateDisplay(event) {
$('.img').css({
backgroundPosition: (event.pageX * -1) + 'px ' + (event.pageY * -1) + 'px'
});
}
box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);
});
.wrapper {
width: 300px;
height: 300px;
border: 1px solid navy;
overflow: hidden;
}
.img {
margin-right: auto; /* 1 */
margin-left: auto;
width: 100%;
padding-bottom: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="log">
<img id="logo" src="/kalamulur/Photo/my-logo5.png" alt="">
</div>
<div class="linken">
<ul class="linken_ul">
<li class="dropdown">
<i>Home</i>
</li>
<li class="dropdown">
<i>Taschen & Rucksäcke</i>
<div class="dropdown-content">
<i>Taschen, Tablettaschen & Computertaschen</i>
<i>Rucksäcke</i>
<i>Beutel</i>
<i>Gürteltasche, Mäppchen & Schnupftabakdose</i>
</div>
</li>
<li class="dropdown">
<i>Haus</i>
<div class="dropdown-content">
<i>Dekoration</i>
<i>Teppich</i>
<i>Yogamatten & Necessaire</i>
</div>
</li>
<li class="dropdown">
<i>Kleidung</i>
<div class="dropdown-content">
<i>T-Shirts für Frauen & Männer</i>
<i>Hösen für Frauen & Männer</i>
<i>Schals, Mützen & Hute</i>
<i>Sandalen</i>
</div>
</li>
<li class="dropdown">
<i>Schmuck</i>
<div class="dropdown-content">
<i>Ringe, Ohrringe, Ketten ...</i>
</div>
</li>
<li class="dropdown">
<i>Über uns</i>
<div class="dropdown-content">
<i>Über uns</i>
<i>Kundenservice</i>
</div>
</li>
<li class="dropdown">
🌍 English
<div class="dropdown-content">
Spanisch
</div>
</li>
</ul>
</div>
</header>
<main>
<div class="wrapper">
<span id="x"></span>
<div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
<span id="y"></span>
</div>
</main>
Related
Very first question on Stack Overflow, regarding Vanilla Javascript.
I have four links in an unordered list. I have set up a mouseover event on each <li> by using forEach.
When I hover over the element I add a css pseudo class of ::after to the element, which displays a small css rectangle underneath the hovered element.
When I move my mouse directly downward off the element and off the <ul>, the the Css pseudo class of ::after gets removed and the rectangle disappears, which is exactly what I want. Except if I move my mouse directly from one link element to another element to the left or right, the previous link element's css pseudo class of ::after still remains, so the square remains.
Below is some sample code. Any insights would be highly appreciated.
navigationMouseOver();
function navScroll() {
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop > 100) {
document.querySelector(".contact-info2").classList.add("visible");
} else {
document.querySelector(".contact-info2").classList.remove("visible");
}
})
}
function navigationMouseOver() {
let navLi = document.querySelectorAll(".link");
navLi.forEach(function(element) {
element.addEventListener("mouseover", function(e) {
let link = e.currentTarget;
let linkText = e.currentTarget.textContent;
console.log(linkText);
const subMenu = document.querySelector(".sub-menu");
const arrow = document.querySelector(".arrow");
let elementPos = link.getBoundingClientRect();
let elementTop = elementPos.top - 50;
let elementWidth = elementPos.width;
let elementBottom = elementPos.bottom - 10;
let elementCenter = (elementPos.left + elementPos.right) / 2;
let trueCenter = elementCenter - elementWidth;
let arrowW = arrow.clientWidth;
let arrowCenter = elementCenter - arrowW;
element.classList.add("after");
subMenu.classList.add("show");
arrow.style.bottom = `${elementBottom} px`
arrow.style.left = `${arrowCenter}px`
subMenu.style.top = `${elementBottom}px`;
subMenu.style.left = `${trueCenter}px`;
subMenu.innerHTML = "Hallo";
navMouseOver(element)
})
})
}
function navMouseOver(element) {
let subMenu = document.querySelector(".sub-menu")
let banner = document.querySelector(".banner");
banner.addEventListener("mouseover", function(e) {
if (!e.target.classList.contains("link")) {
subMenu.classList.remove("show");
element.classList.remove("after");
}
})
}
.banner-nav li.after::after {
content: "";
display: block;
position: absolute;
background: white;
height: 30px;
width: 30px;
top: - 20px;
left: 40%;
}
<section class="banner">
<div class="banner-logo">
<h1 class="logo-text"> Logo</h1>
</div>
<div class="banner-nav ">
<ul class="nav-ul ">
<li class="link"> Gallery </li>
</a>
<a href="#">
<li class="link"> Products</li>
</a>
<a href="#">
<li class="link"> About </li>
</a>
<a href="#">
<li class="link"> Contact </li>
</a>
</ul>
</div>
<div class="arrow"></div>
<div class="sub-menu"></div>
</section>
You don't need JavaScript for this. You can combine :hover pseudo class with ::after like this:
.banner-nav li:hover::after {}
.banner-nav li:hover::after {
content: "";
display: block;
position: absolute;
background: white;
height: 30px;
width: 30px;
top: - 20px;
left: 40%;
border: 1px solid;
}
<section class="banner">
<div class="banner-logo">
<h1 class="logo-text"> Logo</h1>
</div>
<div class="banner-nav ">
<ul class="nav-ul ">
<li class="link"> Gallery </li>
</a>
<a href="#">
<li class="link"> Products</li>
</a>
<a href="#">
<li class="link"> About </li>
</a>
<a href="#">
<li class="link"> Contact </li>
</a>
</ul>
</div>
<div class="arrow"></div>
<div class="sub-menu"></div>
</section>
I'm trying to make some sort of gallery on my website. There are 3 buttons, and underneath some text and picture are placed. When I click the button, I want that the content changes (to the content from button #2 etc.). How can I achieve that?
<ul>
<a href="">
<li>Btn1</li>
</a>
<a href="">
<li>Btn2</li>
</a>
<a href="">
<li>Btn3</li>
</a>
</ul>
<div class="list-first"">
<p class="list-first list-first-mobile">some text from first btn</p>
<img src="imgs/stock1.jpeg" alt="jpg from first btn" class="list-first-img">
</div>
Try this ,hope it helps
document.querySelectorAll('button').forEach((el, i) => {
el.addEventListener("click", () => {
document.querySelectorAll('p').forEach(ed => ed.style.display = "none")
el.nextElementSibling.style.display = "block"
})
})
<style>
.loc-caption:before {
content: attr(title);
display: block;
}
ul {
text-align: center;
padding: 0;
}
li {
width: 25%;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
}
</style>
<ul>
<li class="loc-caption"><button>ClickME</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://chainimage.com/images/related-pictures-natural-sceneries-beautiful-wallpapers.jpg" alt="jpg from first btn " class="list-first-img "> some text from first btn
</p>
</li>
<li class="loc-caption"><button>ClickME2</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwXvWYU5tYrokWILC7lgjmCYqYGvActZnt9q8AcPs4dR7hMTBR" alt="jpg from second btn " class="list-first-img "> some text from second btn
</p>
</li>
<li class="loc-caption"><button>ClickME3</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzzP-CJnW3xuNeqqMcNLzK_IFPCywsEKifAWlajEzWcdALIDLI" alt="jpg from third btn " class="list-first-img "> some text from third btn
</p>
</li>
</ul>
I need help for my personal website. I want to make a one page site with a fixed top navbar (with transparent background). At the scrolling of the page, the color of the menu elements must change dinamically from black to white on the sections that have a dark background (they have a ".dark-bg" class) and return white on the other sections. All sections are 100vh height (except for the menu, of course). This is the HTML main structure of the site:
<section class="section--menu fixed-header">
<nav class="menu" id="navigation">
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
</nav>
</section>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I wrote this jQuery script but it seems to work only for the last section with ".dark-bg" class.
$(document).ready(function() {
$(".dark-bg").each(function() {
detectBg( $(this) );
});
function detectBg(sezione) {
$(window).scroll(function() {
var finestra = $(window).scrollTop();
var sezCurr = sezione.offset().top;
var sezNext = sezione.next().offset().top;
if (finestra >= sezCurr && finestra < sezNext) {
$('.menu__link').css("color", "#ebebeb");
}
else {
$('.menu__link').css("color", "#1c1c1c");
}
});
}
});
Thanks in advance!
You need to handle scroll event of the window, and in that handler, check if any of the dark section is under the menu, if so, then change the color of the menu links. Here is an example of changing the color for all links, but it can be easily extended to do it separately for each link:
$(window).scroll(function() {
var vpHeight = $(window).height();
var isBlack = false;
$(".dark-bg").each(function(i, section) {
if(isBlack) {
return;
}
var offset = $(section).offset().top - $(window).scrollTop();
if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) {
isBlack = true;
return;
}
});
$(".menu__link").css("color", isBlack ? "white" : "black");
});
body {
padding: 0;
margin: 0;
}
ul {
position:fixed;
background: orange;
padding: 0;
margin: 0;
list-style-type: none;
}
ul > li {
float: left;
padding: 0 4px;
}
section {
background:red;
height: 100vh;
}
.dark-bg {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?
There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}
Can someone tell me why this isn't working?
HTML
<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="header_meta" class="container_wrap container_wrap_meta">
<div id="header_main" class="container_wrap container_wrap_logo">
<div id="header_main_alternate" class="container_wrap">
<div class="container">
<nav class="main_menu" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" data-selectname="Select a page">
<div id="megaMenu-sticky-wrapper">
<div id="megaMenu" class="megaMenuContainer megaMenuHorizontal wpmega-preset-vanilla megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnClick megaFullWidth wpmega-noconflict megaMinimizeResiduals themeloc-avia megaMenu-withjs">
<div id="megaMenuToggle" class="megaMenuToggle">
<ul id="megaUber" class="megaMenu">
<li id="menu-item-8" class="jrm-um-sticky-only menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
<li id="menu-item-1459" class="my_custom_class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter">
<a href="#">
CSS
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
display: none;
}
JS
$(document).ready(function() {
$('.my_custom_class').click(function() {
$('#overlay-2').toggle();
});
});
I want the #overlay-2 to be hidden when the page loads and then toggle show/hide when I use the menu button with a custom class assigned in wordpress nav menu "css classes" metabox. .my_custom_class is what I assigned it.
Why isn't this working?
If you could supply the corrected code that would be great :)
Thanks!
Simply cause you don't have any .my_custom_class in your HTML
If you add a
<button class="my_custom_class">Toggle Overlay</button>
both in your document and inside the overlay you're good to go:
LIVE EXAMPLE