Toggle button in HTML and JQuery - javascript

I am trying to create a toggle button using the following, but its not working.
i have included CSS, HTML and javascript snippets I am using. If I am not doing something right, kindly advice.
CSS:
.toggle-button {
margin-bottom: 15px;
}
.toggle-button img {
display: inline-block;
height: 30px;
width: 60px;
background: url(../images/on-button.png) no-repeat center center;
}
.toggle-button img.down {
background: url(../images/off-button.png) no-repeat center center;
}
HTML:
<head>
<script Language="JavaScript">
function toggle (img) {
$(img).toggleClass("down");
}
</script>
</head>
<div class="right-form">
<h2>Email Settings</h2>
<div class="toggle-button">
<label>Stock Require Scanning:</label>
<img ondblclick="toggle(this);" border="0 id="stock_require_scanning"/>
</div>
<div value="OFF" class="toggle-button">
<label>Head Office Alerts:</label>
<img ondblclick="toggle(this);" class="down" border="0" id="head_office_alerts"/>
</div>
</div>
Is there anything I am not doing right?

Here you have a running demo: http://jsfiddle.net/L9nHY/ (I used the color green for "on" and red for "down"). Your made an error here:
<img ondblclick="toggle(this);" border="0" id="stock_require_scanning"/>
You have to replace this with '#stock_require_scanning':
<img ondblclick="toggle('#stock_require_scanning');" border="0" id="stock_require_scanning"/>
The same you have to do for the other button.
Edited: Sree: See this also: http://jsfiddle.net/L9nHY/1/

Related

scrolling lightbox gallery

I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.

Jquery slide panel moves adjacent picture down

I'm using Jquery slide panels for some images. The problem I'm having is when the slide panel shows it moves the image next to it down. I do not want this to happen. Is there a way to show the slider panel but not move the image next to it? There are questions similar to this but there are no answers to them on the site.
Here's the jsfiddle without the image files:
https://jsfiddle.net/amyspod/q2obknwt/
Here's my code:
<div class="images">
<div class="image1">
<img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
<div class="panel" id="hero">PSD to responsive website</div>
</div>
<div class="image2">
<img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
<div class="panel" id="oak">PSD to responsive website 2</div>
</div>
</div>
.myImg {
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin-top: 40px;
}
/*slider panels*/
.image1, .image2{
display:inline-block;
margin-left: 10%;
}
.panel {
padding: 10px;
text-align: center;
background-color: white;
font-size: 20px;
display: none;
}
$(document).ready(function(){
function slidepanel(x,y){
$(x).mouseenter(function(){
$(y).slideToggle("slow");
});
$(x).mouseleave(function(){
$(y).slideToggle("slow");
});
}
slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});
Inline (or inline-block) elements align to the baseline. Try this:
.image1,
.image2 {
...
vertical-align: top;
}
Demo
Also note that CSS classes, by design, are intended to be reusable. I see no reason to have two of them in this case, and they should have semantic values that describe their use or function.

Change background image of one element to the same image of the other element on click

I'm currently working on a nail polish website and am very new to Jquery. I need to implement a "try it on" page where people can select a colour they like and the nails of the image change to that specific colour.
Basically like this: http://chinaglaze.com/Try-On/index.html
I've tried pulling the html, scripts etc from this link to try figure out how it's been done. However, I have absolutely no idea how to implement this and get it working on my site.
I've been doing a a lot of research and cannot find the answer.
Okay so the hand is a div with a .png background image implemented via css (the nails are transparent). The buttons next to the hand are plain images. Basically when someone selects the specific button image, it must then pull to the div as a background image and repeat. Thus showing through as the nail colour.
I'm not sure if this makes any sense?
Here is a sample snippet for how to set colour of one item on another on click.
(Since you have not provided any HTML i have used a sample mark up)
In the link you have provided they might be using image instead.
$(".item").click(function() {
$("#change").css("background",$(this).css("background"));
});
#change {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.item {
height: 100px;
width: 100px;
display: inline block;
float: left
}
#green {
background: green;
}
#red {
background: red;
}
#blue {
background: blue;
}
#yellow {
background: yellow
}
#black {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change">
Select a color
</div>
<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>
Here is the solution, used the code from above answer and created a working [JSFiddle][1] with few changes
$(".item").click(function() {
$(".screen").css("background",$(this).css("background"));
});
.screen {
border: 1px solid #ccc;
}
#change
{
background:url("http://chinaglaze.com/images/tryon/hand_1.png") 0px 0px no-repeat;
width: 300px;
height: 516px;
}
.item {
height: 100px;
width: 100px;
display: inline block;
float: left;
}
#green {
background: green;
}
#red {
background: red;
}
#blue {
background: blue;
}
#yellow {
background: yellow
}
#black {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
<div id="change">
Select a color
</div>
</div>
<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>

view enlarged image ontop of content on mouseover with javascript

I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/

T-shirt image hover (based on different colors)

So ive seen some jquery hover effects, but none that can do the multiple choices hover.
Basically i have 5 t-shirt color choices, that when each one is hovered over, it should pop up where the current (green t-shirt) is located.
Heres link - http://musclefire.com/26.php
Note: there will also be other t-shirt styles on this page as well, so not sure if this will be too much code/complex for this to work properly.
p.s. - whoever nails it and gets perfect code, i'll send out a free tee to ya!
thanks much!
I'm pretty sure this is what you're looking for:
Demo: http://plnkr.co/edit/jiNxcw9nHQD5gV4vvwlj?p=preview
HTML
<div id="main">
<img class="active" src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
<div id="thumbs">
<img src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
CSS
#main {
border: solid 1px #eee;
text-align: center;
}
#thumbs {
border: solid 1px #eee;
text-align: center;
}
#main img {
width: 300px;
display: none;
}
#main img.active {
display: inline-block;
}
#thumbs img {
width: 50px;
height: auto;
}
jQuery
$(function(){
$('#thumbs img').bind('hover', function(){
var which = $(this).attr('src');
$("#main img:visible").hide();
$('#main img[src="' + which +'"]').stop().fadeIn(800);
});
});
All I know you cannot do this with css. So you should use javascript or jquery for this.
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
For example:
.parent:hover .child{}
.child{}
<div class="parent">
<div class="child"></div>
</div>
You can do what you wanted with jquery,
Live demo : http://jsfiddle.net/XUM8R/

Categories