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 !
Related
const ratingElements = document.querySelectorAll(".ratings");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
console.log(event.target.innerText || event.target.parentNode.innerText); // || means "OR"
event.target.classList.add("active")
event.target.parentNode.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="unhappy.svg" alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="neutral.svg" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="happy-icon.svg" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
it should likely to be this
but it is like
You were adding active class to the parent div which is why whole div is turning green when you click on one emoji. One more thing was , when you click on one emoji then click on other both of them were getting green background color. Here is the solution .
const ratingElements = document.querySelectorAll(".ratings");
const images= document.getElementsByClassName("emoji-icon");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
for(image of images){
image.classList.remove("active");
}
event.target.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
background-color:aqua;
}
img
{
width:100px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090 alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
remove event.target.parentNode.classList.add("active") . Then select images using getElementsByClassName()(or whichever method you prefer) then remove class active for all of them . Then add class active to only one emoji .
I wanna have an animated Dropdown-menu as a Navigation!
In Css I've set transition height to 1s and in Javascript I add a value
of for the height property in an Eventlistener. When the ham-symbol is
clicked the menu should go down in a transition of 1s. The problem is that when I click the ham-symbol it does't move with transition...it just appears... I recently found out when I add display: block in the css dropdown menu it works, but then obviously the toggle click ham-symbol doesnt work anymore! Please help!
<nav>
<a href="#">
<img id="ham" alt="toggle menu" src="Images/hamburger.svg">
</a>
<div id="dropdown" class="hide-mobile">
<ul>
<li>
Home
</li>
<li>
Service
</li>
<li>
Einbruchschutz
</li>
</ul>
</div>
</nav>
#dropdown {
/* display: block */
border-top: 3px solid red;
position: absolute;
width: 80%;
top: 100%;
left: 10%;
height: 0;
background: #fff;
padding-top: 2.2rem;
box-shadow: 0 2px 2px lightgrey;
z-index: 1;
transition: height 1s;
}
let menu = document.getElementById('ham');
let nav = document.getElementById('dropdown');
menu.addEventListener('click', function(e) {
nav.classList.toggle('hide-mobile');
nav.style.height = "400px";
})
Take a look at this codepen.
You can make it better but your basic requirement is met.
You just needed to:
toggle the height, not the top.
set overflow-y: hidden;
If you want to keep your solution you can try something like that :
let menu = document.getElementById('ham');
let nav = document.getElementById('dropdown');
var isOpen = false;
menu.addEventListener('click', function(e) {
if (isOpen == false){
nav.classList.toggle('hide-mobile');
nav.style.top = "-100%";
isOpen = true;
}
else{
nav.classList.toggle('hide-mobile');
nav.style.top = "0%";
isOpen = false;
}
})
#dropdown {
border-top: 3px solid red;
position: absolute;
width: 80%;
top: 0;
left: 10%;
background: #fff;
padding-top: 2.2rem;
box-shadow: 0 2px 2px lightgrey;
z-index: 1;
transition: 1s;
}
/* Just for the example */
img{
height: 50px;
width: 50px;
margin-left:-5px;
margin-top:-5px;
}
<nav>
<a href="#">
<img id="ham" alt="toggle menu" src="https://static.thenounproject.com/png/195031-200.png">
</a>
<div id="dropdown" class="hide-mobile">
<ul>
<li>
Home
</li>
<li>
Service
</li>
<li>
Einbruchschutz
</li>
</ul>
</div>
</nav>
Click on "Run code snippet" to see the animation. If that does not work there is definitely a problem with your browser display, try on another machine and check that javascript is not disabled.
JSFiddle :
https://jsfiddle.net/t3wrhjpq/2/
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
I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too.
I've been working on a button in HTML and CSS, you can view the demo of the button here.
I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.
Is there any simple or understandable way for creating a function which does this in JavaScript?
Here is the code I have:
HTML:
<div id="language-wrapper">
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
<div id="language-dropdown">
<h3>Choose your language</h3>
<a class="language-links" href="#">Chinese</a>
<a class="language-links" href="#">Danish</a>
<a class="language-links" href="#">Deutsch</a>
<a class="language-links" href="#">English</a>
<a class="language-links" href="#">Espanol</a>
<a class="language-links" href="#">Filipino</a>
<a class="language-links" href="#">Hindu</a>
<a class="language-links" href="#">Italiano</a>
<a class="language-links" href="#">Norsk</a>
<a class="language-links" href="#">Nederlands</a>
<a class="language-links" href="#">Polski</a>
<a class="language-links" href="#">Portugues</a>
<a class="language-links" href="#">Svenska</a>
<a class="language-links" href="#">Suomi</a>
<a class="language-links" href="#">Turkce</a>
<a class="language-links" href="#">Urdu</a>
<p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>
</div> <!-- end of language-dropdown class -->
</div> <!-- end of language-wrapper -->
CSS:
#language-wrapper { display: inline-block; }
#language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
.language-icon {
color: #fff;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
left: 0; top: 0;
}
.fr { background: url("images/language-sprite.png") no-repeat 0 0; }
.fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
.language-icon:before {
content:'\25BE';
width:0px;
height:0;
position:absolute;
right:16px;
top: 0;
}
.language-icon:hover:before {
color: #d13030;
content: '\25B4';
top: -1px;
}
/* ------------------ LANGUAGE DROPDOWN ------------------ */
#language-dropdown {
opacity: 0;
width: 1023px;
display: none;
margin-top: 3px;
left: 0;
position: absolute;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0px 3px 3px #b3b3b3;
}
#language-dropdown h3 {
color: #d13030;
font-size: 14px;
font-weight: normal;
padding: 5px 15px 0px 15px;
}
#language-dropdown p {
font-size: 12px;
padding: 0px 0px 10px 15px;
}
#language-dropdown a {
padding: 0px 0px 0px 15px;
}
.language-links {
font-size: 12px;
text-decoration: none;
color: #2793e6;
}
.language-links:hover {
text-decoration: underline;
}
it can be a basic toggle display function on onclik event:
function toggle(el) {
var tag=document.getElementById(el);
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>
test here : http://codepen.io/anon/pen/cHIrd/
note:
opacity:0; removed from your initial CSS
Better practice is to toggle class not style values :)
and maybe to set onclick event via javScript.
return false can be added to avoid link to href .
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>
The Html
<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>
The JavaScript:
document.getElementById("clickme").onclick=function(){
var el = document.getElementById('Another');
if (el.style.display == '') {
el.style.display = 'none';
alert("hide");
}else{
el.style.display = '';
alert("show");
}
};
Here is a sample
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