Change of icon using jquery

Change of icon using jquery - javascript

I am trying to change the list icon. Once the list icon is clicked then a list will open and the icon should change the icon to close icon. again on click on close it should change to list icon.
Here is the code what I have tried:
HTML:
<div id="menuLayout">
<a href="#menuLayout" id="openMenuLayout">
<img src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
<img src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
<nav id="menuLayoutList">
<ul>
<li>
<form id="search">
<input type="search" placeholder="Search...">
</form>
</li>
<li>Home</li>
<li>About Us</li>
<li>Key Facts</li>
<li>Team</li>
<li>Register</li>
<li>Contact</li>
</ul>
</nav>
</div>
Jquery:
$("#openMenuLayout").click(function(e){
debugger;
if ($('#menuLayout').hasClass('open-menu')){
$('#menuLayout').removeClass('open-menu');
$('#openMenuLayout').find('img').removeClass().addClass('opened_icon');
$(this).css('display','block');
} else {
$('#menuLayout').addClass('open-menu');
$('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
$(this).css('display','block');
}
e.preventDefault();
});
Css:
#menuLayout {
display: block;
position: fixed;
width: 280px;
height: 100%;
z-index: 99;
top: 0;
left: -280px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
transition: left 0.2s ease-in-out;
-ms-transition: left 0.2s ease-in-out;
-o-transition: left 0.2s ease-in-out;
-moz-transition: left 0.2s ease-in-out;
-webkit-transition: left 0.2s ease-in-out;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0px, 0px);
background-color: #b11c1c;
background-image: -moz-linear-gradient(center top , #b11c1c, #AD3335);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b11c1c), to(#AD3335));
background-image: -webkit-linear-gradient(top, #b11c1c, #6A0001);
background-image: -o-linear-gradient(top, #b11c1c, #6A0001);
background-image: linear-gradient(to bottom, #b11c1c, #6A0001);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffb11c1c', endColorstr='#ffAD3335', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
#openMenuLayout {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
width: 32px;
height: 32px;
font-size: 16px;
color: #FFF;
line-height: 32px;
text-align: left;
z-index: 999;
top: 20px;
right: -52px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
img {
max-width: 100%;
}
#menuLayout.open-menu {
left: 0;
}
#menuLayout.open-menu #openMenuLayout {
left: 20px;
right: auto;
}
nav#menuLayoutList {
position: relative;
margin: 70px 0;
}
nav#menuLayoutList ul {
position: relative;
margin: 0;
}
New Link

What you want to achieve is not that hard.
I suggest you to use div elements instead of image elements and, use the css property background-image to define it.
This enables you to use two seperate css classes (with different background images), one for the opened menu and one for the closed one.
Further, it is now possible to use css sprites to avoid image flickering due not loaded resources and to avoid multiple http requests.
Your implementation should look similar to this. Just replace background-color with background-image. If you deploy your application remember that you can avoid image flickering with the sprite technique.
http://jsfiddle.net/V5vg9/

I think you search toggleClass:
$("#openMenuLayout").click(function(e){
$(this).toggleClass('close');
}
then define in CSS a open class and a close class with the open and close background-image.

Why not use hide and show functions? is ver most simple
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="menuLayout">
<a href="#menuLayout" id="openMenuLayout">
<img class="list" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' style='display:none;' />
<img class="close" src="http://seotobiz.com/images/icon_close.png" /></a>
<nav id="menuLayoutList">
<ul>
<li>
<form id="search">
<input type="search" placeholder="Search...">
</form>
</li>
<li><a class="a" href="javascript:;" id="home">Home</a></li>
<li><a class="a" href="javascript:;" id="aboutLayout">About Us</a></li>
<li><a class="a" href="javascript:;" id="KeyLayout">Key Facts</a></li>
<li><a class="a" href="javascript:;" id="teamLayout">Team</a></li>
<li><a class="a" href="javascript:;" id="#">Register</a></li>
<li><a class="a" href="javascript:;" id="contactLayout">Contact</a></li>
</ul>
</nav>
</div>
<script type="text/javascript">
$('.a').click(function(){
if($(this).hasClass("v")){
$('.list').hide();
$('.close').show();
$(this).toggleClass("v");
}else{
$('.list').show();
$('.close').hide();
$(this).toggleClass("v");
}
});
</script>
Now, u need detect with $(this).attr("id"); for anchor

Related

How to addclass to current active div in div

I have few similar blocks with similar content. If I hover on first block, for first block and one other sub-block in this first parent block classes should be added. And for the second block too: if I hover on second block for second block and sub-block in this parent second block shold be added the same classes.
Actually I can do unique classes or indentify for each block seperatly but I this this isn't correct and if I want to add I more block I have to change css, html and javascript code - this is uncomfortable.
var Block1 = $('.point-to-black');
ShopBlock1.mouseover(function(){
$(this).addClass('c-lb-black');
$('.c-lb-text-zone').addClass('c-lb-tz-full');
});
ShopBlock1.mouseout(function(){
$(this).removeClass('c-lb-black');
$('.c-lb-text-zone').removeClass('c-lb-tz-full');
});
.point-to-black {
width: 100%;
height: 100px;
transition: 0.5s;
}
.c-lb-black{
background-color: rgba(0,0,0,0.6)!important;
width: 100%!important;
height: 100px!important;
transition: 0.5s;
}
.c-lb-tz-full {
transition: 0.3s;
margin: 0px 0px 0px 33%!important;
padding: 3px 25%!important;
font-size: 25px!important;
transform: skew(-20deg)!important;
background: #c1af25!important;
line-height: 33px!important;
}
.c-lb-text-zone1 {
line-height: 33px;
letter-spacing: 2px;
transition: 0.3s;
margin: 0px 0px 0px 50%;
padding: 3px 15%;
font-size: 25px;
transform: skew(-20deg);
background: #c1af25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="c-link-list">
<li>
<div class="c-lb-blog">
<div class="point-to-black">
<div class="c-lb-text-zone">
<h1>Blog1</h1>
</div>
</div>
</div>
</li>
<li>
<div class="c-lb-blog">
<div class="point-to-black">
<div class="c-lb-text-zone">
<h1>Blog2</h1>
</div>
</div>
</div>
</li>
</ul>
So if I do mouseover on 'point-to-black' block 'c-lb-black' class adds good just for current block because of 'this' pointer but 'c-lb-tz-full' adds for all blocks with class'c-lb-text-zone'.

$(this).find('.c-lb-text-zone').addClass('c-lb-tz-full');
And
$(this).find('.c-lb-text-zone').removeClass('c-lb-tz-full');
It will affect only the children of the specific div.

isotope with lightGallery filtering with multiple galleries

I am currently working on a portfolio for an artist. I am using Masonry with Isotope to filter for specific kinds of paintigs. When the items are being clicked, it opens lightGallery: http://sachinchoolur.github.io/lightGallery/
Everything works fine so far, the problem is the following:
What I want to achieve is that, if you filter for nature paintings for example, only the nature paintings will be shown and if you click on one of the items it opens the gallery. But the problem is, that at the moment ALL images of ALL categories are been shown in the gallery of nature. So if you click through them, you also get images of the category 'people' for example.
I guess the aim there is to give the different categories different 'galleries'. But if the filter 'show all' is clicked, the user should also be able to click through all the images of all categories, so that the gallery is not ending when the category of the item being clicked 'ends'.
As Im not that good with javascript, I hope you may be able to help me a little bit and that you understand my problem ..
The Code
HTML MARKUP
<div class="categories">
<button data-filter="*">Alle</button>
<button data-filter=".ship">Schiff</button>
<button data-filter=".copop">CoPop</button>
<button data-filter=".grey_bg">grey bg</button>
</div>
<div class="grid" id="lightgallery">
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
</div>
</div>
JS initialize lightgallery
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
JS isotope
(function($) {
$('#wrap').imagesLoaded(function() {
$('.categories').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
var $grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__item'
}
})
});
So I guess I need to create several galleries and say in the code that only the items of that activated data-filter gallery will be shown when clicked. But maybe that would also work without creating extra multiple galleries? Because then the problem would maybe be, that when all items are active, only the ones in that specific gallery of the selected item will be shown in the lightGallery.
Thank you for your help in advance!

kindly check this pen to get what you need
$(document).ready(function() {
var $gallery = $('#gallery');
var $boxes = $('.revGallery-anchor');
$boxes.hide();
$gallery.imagesLoaded( {background: true}, function() {
$boxes.fadeIn();
$gallery.isotope({
// options
sortBy : 'original-order',
layoutMode: 'fitRows',
itemSelector: '.revGallery-anchor',
stagger: 30,
});
});
$('button').on( 'click', function() {
var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
$gallery.data('lightGallery').destroy(true);
$gallery.lightGallery({
selector: filterValue.replace('*','')
});
});
});
$(document).ready(function() {
$("#gallery").lightGallery({
});
});
//button active mode
$('.button').click(function(){
$('.button').removeClass('is-checked');
$(this).addClass('is-checked');
});
//CSS Gram Filters on Mouse enter
$("#gallery a .nak-gallery-poster").addClass("inkwell");
$("#gallery a").on({
mouseenter : function() {
$(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("walden");
},
mouseleave : function() {
$(this).find(".nak-gallery-poster").removeClass("walden").addClass("inkwell");
}
});
.revGallery-anchor, .gal-overlay, .nak-gallery-poster{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.revGallery-anchor{
overflow: hidden;
position: relative;
width: calc(100% / 5);
display: block;
float: left;
border: 5px solid #e9e9e9;
}
.gal-overlay{
display: block;
width: 100%;
height: 100%;
background: rgba(27,27,27, 0.6);
position: absolute;
top: 0;
left: 0;
transition: background .4s ease;
-webkit-transition: background .4s ease;
}
.revGallery-anchor:hover .gal-overlay{
background: rgba(27,27,27, 0);
}
.nak-gallery {
display: block;
width: 100%;
position: relative;
margin-top: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.nak-gallery-poster{
padding-bottom:100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
}
.revGallery-anchor:hover .nak-gallery-poster{
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
.img-responsive{
display:none;
}
.button{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 200px;
height: 48px;
border: 1px solid rgba(0,169,157,1);
background-color: rgba(0,169,157,1);
border-radius: 2px;
color: #fff;
letter-spacing: 2px;
}
.button:hover {
background-color: #363636;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.revGallery-anchor-width1{
width: 40%
}
.revGallery-anchor-width2{
width: 30%
}
.revGallery-anchor-width3{
width: 20%
}
.nak-gallery-height1{
padding-bottom: 400px
}
.nak-gallery-height2{
padding-bottom: 300px
}
.nak-gallery-height3{
padding-bottom: 200px
}
.preloader{
display: none;
}
.preloaderStyle{
background: red;
width: 100%;
height: 100px;
}
<button type="button" class="button is-checked" data-filter="">ALL</button>
<button type="button" class="button" data-filter=".design">DESIGN</button>
<button type="button" class="button" data-filter=".branding">BRANDING</button>
<div class="nak-gallery nlg1" id="gallery">
<a href="http://unsplash.com/photos/GYNxcQvBNzA/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/GYNxcQvBNzA/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/GYNxcQvBNzA/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="https://www.youtube.com/watch?v=Io0fBr1XBUA" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/ssAcdlJRsI4/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/ssAcdlJRsI4/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/EKIyHUrUHWU/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/EKIyHUrUHWU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/EKIyHUrUHWU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/CFi7_hCXecU/download" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/CFi7_hCXecU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/CFi7_hCXecU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/cFplR9ZGnAk/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/cFplR9ZGnAk/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/cFplR9ZGnAk/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
</div>
https://codepen.io/kannan3024/pen/YWoQgq

Trying to fadeIn .css ('background-image", __)

I'm trying to get a background image to swap between other images when divs are hovered over. What do I need to change to make the images fade between one another? Code looks like this:
$('#mainUK').mouseenter(function(){
$('.splash').css("background-image","url(Assets/Images/Splash/UK.jpg)");
});
$('#mainJapan').mouseenter(function(){
$('.splash').css("background-image","url(Assets/Images/Splash/Japan.jpg)");
});
etc..
CSS:
.splash {
background-image: url(Assets/Images/Splash/UK.jpg);
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
position:fixed;
}
html:
<div class="splash_bg">
<div class="splash">
<div class="back_arrow"><h3>←</h3></div>
<div class="main_nav">
<ul>
<li class="main_headings"><div id="mainUK"><h3>The UK</h3></div></li>
<li class="main_headings_sub"><div id="mainEngland"><h3>England</h3></div></li>
<li class="main_headings_sub"><div id="mainScotland"><h3>Scotland</h3></div></li>
<li class="main_headings_sub"><div id="mainWales"><h3>Wales</h3><div></li>
<li class="main_headings"><div id="mainJapan"><h3>Japan</h3></div></li>
<li class="main_headings"><div id="mainChina"><h3>China</h3></div></li>
<li class="main_headings"><div id="mainHK"><h3>Hong Kong</h3><div></li>
<li class="main_headings"><div id="mainMalaysia"><h3>Malaysia</h3><div></li>
</ul>
</div>
</div>
</div>
EDIT:
So I've solved it. Thanks to #demux/#luciferous as you pointed me in the right direction. If there's a better way to do this please feel free to let me know. Thank again.
html:
<div class="splash">
<div class="splash_UK"></div>
<div class="splash_Japan"></div>
<div class="splash_China"></div>
<div class="splash_HK"></div>
<div class="splash_Malaysia"></div>
<div class="back_arrow"><h3>←</h3></div>
<div class="main_nav">
<ul>
<li class="main_headings"><div id="mainUK"><h3>The UK</h3></div></li>
<li class="main_headings_sub"><div id="mainEngland"><h3>England</h3></div></li>
<li class="main_headings_sub"><div id="mainScotland"><h3>Scotland</h3></div></li>
<li class="main_headings_sub"><div id="mainWales"><h3>Wales</h3><div></li>
<li class="main_headings"><div id="mainJapan"><h3>Japan</h3></div></li>
<li class="main_headings"><div id="mainChina"><h3>China</h3></div></li>
<li class="main_headings"><div id="mainHK"><h3>Hong Kong</h3><div></li>
<li class="main_headings"><div id="mainMalaysia"><h3>Malaysia</h3><div></li>
</ul>
</div>
</div>
CSS: (I've adjusted the z-index either side of the divs to 1 & 3 respectively.)
.splash_UK, .splash_Japan, .splash_China, .splash_HK, .splash_Malaysia{
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
position:fixed;
opacity:0;
z-index:2;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
.splash_UK {
background-image: url(Assets/Images/Splash/UK.jpg);
}
.splash_Japan {
background-image: url(Assets/Images/Splash/Japan.jpg);
}
.splash_China {
background-image: url(Assets/Images/Splash/China.jpg);
}
.splash_HK {
background-image: url(Assets/Images/Splash/HK.jpg);
}
.splash_Malaysia {
background-image: url(Assets/Images/Splash/Malaysia.jpg);
}
JS:
$('#mainJapan').mouseenter(function() {
$('.splash_Japan').css('opacity', '1');
$('.splash_UK,.splash_China,.splash_HK,.splash_Malaysia').css('opacity','0');
});
$('#mainUK').mouseenter(function() {
$('.splash_UK').css('opacity', '1');
$('.splash_Japan,.splash_China,.splash_HK,.splash_Malaysia').css('opacity','0');
});
$('#mainChina').mouseenter(function() {
$('.splash_China').css('opacity', '1');
$('.splash_Japan,.splash_UK,.splash_HK,.splash_Malaysia').css('opacity','0');
});
$('#mainHK').mouseenter(function() {
$('.splash_HK').css('opacity', '1');
$('.splash_Japan,.splash_China,.splash_UK,.splash_Malaysia').css('opacity','0');
});
$('#mainMalaysia').mouseenter(function() {
$('.splash_Malaysia').css('opacity', '1');
$('.splash_Japan,.splash_China,.splash_HK,.splash_UK').css('opacity','0');
});

A CSS only solution:
.splash {
font-family: sans-serif, verdana;
position: relative;
width: 200px;
height: 200px;
}
.splash-item-container {
padding: 0;
}
.splash-item {
margin: 2px 0;
display: block;
list-style-type: none;
background-color: rgba(150, 150, 150, 0.2);
line-height: 1.5em;
}
.splash-item a {
display: block;
color: black;
text-decoration: none;
}
.splash-item:before {
display: block;
content: '';
transition: background-color 1s;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
z-index: -1;
}
.splash-item-red:hover:before {
background-color: #ffdddd;
}
.splash-item-green:hover:before {
background-color: #ddffdd;
}
.splash-item-blue:hover:before {
background-color: #ddddff;
}
<div class="splash">
<ul class="splash-item-container">
<li class="splash-item splash-item-red">Red</li>
<li class="splash-item splash-item-green">Green</li>
<li class="splash-item splash-item-blue">Blue</li>
</ul>
</div>
If you must use jQuery:
$(function() {
$('.main-nav li').hover(function() {
$('.splash').removeClass('cats-bg sports-bg').addClass($(this).data('class'));
});
});
.splash {
transition: background-image 1s;
}
.splash.cats-bg {
background-image: url(http://lorempixel.com/400/200/cats/);
}
.splash.sports-bg {
background-image: url(http://lorempixel.com/400/200/sports/);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="splash">
<h3 class="black-arrow">←</h3>
<ul class="main-nav">
<li data-class="cats-bg">Cats</li>
<li data-class="sports-bg">Sports</li>
</ul>
</div>

One solution would be to use multiple values in the background-image property and toggle them on mouseenter and mouseleave events.
$(document).ready(function() {
var tar = document.getElementById('target');
var bgimage = $(tar).css('background-image');
var bgimagearr = bgimage.split(',')
$(tar).on('mouseenter', function() {
$(this).css('background-image', bgimagearr[0])
});
$(tar).on('mouseleave', function() {
$(this).css('background-image', bgimagearr[1])
});
})
css would be something like
#target{
width:500px;
height: 500px;
background-image:url('./images/one.jpeg'),url('./images/two.jpeg');
}
But it would i reckon it would be better to have two different elements altogether and achieve this easily, if your requirements are flexible,

How to make slide toggle on click?

I'm currently doing responsive design for the website using media queries with (max-width: 480px). Now, I have an issue of making slideToggle on jQuery from left to right. Basically, I'm adding class to element by using jQuery and styling this in CSS. However, I might assume there are other ways to make it...
But this is my approach. Please guys help me out, maybe you have some other recommendations how to solve this.
So, here is my html:
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'></a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><a href="/" ><span></span></a></li>
<li><a href="/menu/16" ><span></span></a></li>
<li><a href="/menu/3" ><span></span></a></li>
<li><a href="/menu/5" ><span></span></a></li>
<li><a href="/articles" ><span></span></a></li>
<li><a href="/menu/21" ><span></span></a></li>
<li><a href="/menu/22" ><span></span></a></li> </ul>
</div>
</div>
this is CSS
#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }
and this is media
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
And my jQuery:
$(document).ready(function(){
$("#js-phone").click(function(){
$('p.phone').addClass("_opened");
});
$("js-close").click(function(){
$('p_phone').removeClass("_opened");
});
});

you have some problems with your code .
in JQ you are not writing the selectors correctly ( js-close needs to have # before it , and p_phone needs to be p.phone instead )
in CSS you need to hide your p.phone with transform:translateX(-100%) and then show it when has class opened with transform:translateX(0%) . Also add transition to the p.phone so when you close it , it will have transition
check snippet below ( Open = open button , Close = close button )
i changed the JQ a bit so it's more readable and easier to change, using selector caching ( the variables ) and event targeting. hope you don't mind
P.S i removed the media query so it will work in the snippet .
check fiddle with media query > jsFiddle
var open = $("#js-phone"),
close = $("#js-close"),
phone = $('p.phone')
$("body").on("click", function(e) {
var target = $(e.target)
if (target.is(open)) {
$(phone).addClass("opened")
}
if (target.is(close)) {
$(phone).removeClass("opened")
}
})
p.phone {
transform: translateX(-120%);
position: fixed;
top: 0;
transition: 0.3s;
-webkit-transition: all 0.3s ease-out;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
background-color: #fff;
display: block;
}
.contacts {
margin-top: 100px;
}
/*#media screen and (max-width: 480px) {*/
p.phone.opened {
transform: translateX(0);
}
/*}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo">Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts">
<p class="phone">+7(499)394-46-03
<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Open</a>
<a id="js-cart" class="js-cart" href="/basket"></a>
<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>
<div class="mainmenu">
<a id='js-cross' class='js-cross'></a>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
</div>

Use style='display:none' for first load. And After Link click show your div and add class using addClass.
$("#js-phone").click(function() {
$('.contacts').show();
$('p.phone').addClass("_opened");
});
$(".js-close").click(function() {
$('.contacts').hide();
$('p_phone').removeClass("_opened");
});
#media screen and (max-width: 480px) {
p.phone._opened {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: all 0.3s ease-out;
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" >
<div class="logo" >Sport-concept.ru - интернет-магазин спортивных товаров</div>
<div class="contacts" style='display:none'>
<p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email">sport-concept#yandex.ru</p>
</div>
<a id='js-phone' class='js-phone'>Phone</a>
<a id="js-cart" class="js-cart" href="/basket">2</a>
<a id='js-mnu' class='js-mnu'>3</a>
<a id="js-cat" class="js-cat">4</a>
</div>

Drag And Drop panels in a web page using JavaScript, CSS, HTML

I want to drag 2 panels in a page. I am able to drag 2 panels "FirstName" and "SecondName". but my requirement is I need to drag one panel above another. When I drag one panel to other end the panel I dragged back ground must be in white. I figured out something by looking at some tutorials, but I couldn't find the solution. Please help me if anyone knows the solution.
My JavaScript code is
Element.prototype.addClassName = function(name) {
if (!this.hasClassName(name)) {
this.className = this.className ? [this.className, name].join(' ') : name;
}
};
Element.prototype.removeClassName = function(name) {
if (this.hasClassName(name)) {
var c = this.className;
this.className = c.replace(new RegExp("(?:^|\\s+)" + name + "(?:\\s+|$)", "g"), "");
}
};
var samples = samples || {};
// Almost final example
(function() {
var id_ = 'columns-almostFinal';
var cols_ = document.querySelectorAll('#' + id_ + ' .column');
var dragSrcEl_ = null;
this.handleDragStart = function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.8';
// this/e.target is the source node.
this.addClassName('moving');
};
this.handleDragOver = function(e) {
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';
return false;
};
this.handleDragEnter = function(e) {
this.addClassName('over');
};
this.handleDragLeave = function(e) {
// this/e.target is previous target element.
this.removeClassName('over');
};
this.handleDrop = function(e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
// Don't do anything if we're dropping on the same column we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
};
this.handleDragEnd = function(e) {
// this/e.target is the source node.
this.style.opacity = '1';
[].forEach.call(cols_, function (col) {
col.removeClassName('over');
col.removeClassName('moving');
});
};
[].forEach.call(cols_, function (col) {
col.setAttribute('draggable', 'true'); // Enable columns to be draggable.
col.addEventListener('dragstart', this.handleDragStart, false);
col.addEventListener('dragenter', this.handleDragEnter, false);
col.addEventListener('dragover', this.handleDragOver, false);
col.addEventListener('dragleave', this.handleDragLeave, false);
col.addEventListener('drop', this.handleDrop, false);
col.addEventListener('dragend', this.handleDragEnd, false);
});
})();
HTML code is this
</head>
<body onload="" style="background-color: #333333;">
<div id="PodTemplate">
<div class="column">
<div class="header_align">
<ul class="inline">
<li>
<span style="float:left;clear:left;text-align:Right; ">First Name</span>
</li>
<li>
<span style="float:right;">
<div><div>
</span>
</li>
<li>
<span style="float:right;">
<div> <a href="#">
<img src="images/Forward.JPG" onClick="dropdown()"/></a>
<div class="drop" id="hide" style="display:none">
<ul>
<li><img src="images/excel_icon.png"> <img src="images/xml_file.png"></li></br>
<li><img src="images/xml_file.png"> <img src="images/excel_icon.png"></li>
</ul>
</div>
</div>
</span>
</li>
<li>
<span style="float:right;">
<div><img src="images/minimize_up.png">
</div>
</span>
</li>
</ul>
</Div>
</div>
<div class="column">
<div class="header_align">
<ul class="inline">
<li>
<span style="float:left;clear:left;text-align:Right; ">Second Name</span>
</li>
<li>
<span style="float:right;">
<div><div>
</span>
</li>
<li>
<span style="float:right;">
<div> <a href="#">
<img src="images/Forward.JPG" onClick="dropdown()"/></a>
<div class="drop" id="hide" style="display:none">
<ul>
<li><img src="images/excel_icon.png"> <img src="images/xml_file.png"></li></br>
<li><img src="images/xml_file.png"> <img src="images/excel_icon.png"></li>
</ul>
</div>
</div>
</span>
</li>
<li>
<span style="float:right;">
<div><img src="images/minimize_up.png">
</div>
</span>
</li>
</ul>
</Div>
</div>
</div>
<script type="text/javascript" src="drag with effect.js"></script>
</div>
</body>
</html>
CSS code:
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
dd {
padding: 5px 0;
}
.column {
display:inline;
height: 500px;
width: 650px;
float: left;
border: 2px solid #1C1C1C;
background-color: #000000; /*Body colour*/
/*margin-right: 5px;*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 0px; /*Describes about box border(shape of the Box curve)*/
-webkit-box-shadow: inset 0 0 3px #000;
-moz-box-shadow: inset 0 0 3px #000;
-ms-box-shadow: inset 0 0 3px #000;
-o-box-shadow: inset 0 0 3px #000;
box-shadow: inset 0 0 3px #000;
text-align: left;
cursor: default;
margin-bottom: 10px;
}
.column header_align {
box-shadow: 3px;
padding: 3px; /*upper line */
/* background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); */
background: -webkit-gradient(linear, left top, right top,
color-stop(0, rgb(0,0,0)),
color-stop(0.50, rgb(79,79,79)),
color-stop(1, rgb(21,21,21)));
background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
background: -o-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
/* border-bottom: 1px solid #ddd; */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-ms-border-radius-topleft: 10px;
-o-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-ms-border-radius-topright: 10px;
-o-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
#PodTemplate .column {
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
}
#PodTemplate .column.over
{
border: 2px dashed #000;
}
#PodTemplate .column.moving {
opacity: 0.25;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
}

Please take a look here. You can see different demos. You will have to mix and match, but basically using jquery droppable you can set docking areas for draggable items and set them to snap to location. JavaScript & jQuery; how to do snapping drag and drop

jQuery is redundant code for that. I don't want additional frameworks too . All can be done with Html/css/javaScript without jQuery. Cheers Swaroop !

Develop Reference

JavaScript is the programming language of the Web.

Change of icon using jquery - javascript

I think you search toggleClass: $("#openMenuLayout").click(function(e){ $(this).toggleClass('close'); } then define in CSS a open class and a close class with the open and close background-image.

Related

How to addclass to current active div in div

isotope with lightGallery filtering with multiple galleries

Trying to fadeIn .css ('background-image", __)

How to make slide toggle on click?

Drag And Drop panels in a web page using JavaScript, CSS, HTML

Categories

Resources