Apply CSS style by clicking on image - javascript

I'm currently working on a little photo album. My plan is if I click the little thumbnail image a border should appear and stay until I click another image. In other words: The hover should stay active when I clicked it.
Here is my Code:
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
<div class="table">
<div class="images" id="image_first">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
<div class="images">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</div>
Hope you can help me!
Thanks in advance, jan

Use :focus and give tabindex="1" attribute.
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:active,
.images:focus,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
<div class="table">
<div class="images" id="image_first" tabindex="1">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
<div class="images" tabindex="1">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</div>
Update: Thanks to Ivan Karaman for pointing this out. One thing I noticed is, you are using .images as a <div>. While this may perfectly work, it is always better to use <a> for generating the #hash-values, by giving them in a link. So, it would be better if you replace the below code:
<div class="images" id="image_first" tabindex="1">
With this:
<a class="images" id="image_first">
And also you don't need the "hack" tabindex="1" as well, as links always have the :target, :focus, and :active states by default. :)

.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
<div class="table">
<a class="images" href="#image_first" id="image_first">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</a>
<a class="images" href="#image_second" id="image_second">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</a>

To do this, you should use jQuery.
Try a little code of jQuery.
$(document).ready(function(){
$("img").click(function(){
$(this).css({'border':'3px solid gren'});
});
})

active and focus might do the trick
.images:hover,
.images:focus,
.images:target
{
border: 4px solid #009EE0;
}
It seems you can use :focus on div, but maybe not :active
https://css-tricks.com/almanac/selectors/f/focus/

Related

Using a toggle to turn off all other active classes on separate divs

I'm having a small issue getting a toggle to work in a particle way, for all I know it can't be done using a toggle which is why I'm writing on here to see if someone can show me the best method. So at the moment I have 3 divs all of which have onclick events, and each have a toggle css class. What I'm trying to achieve is when one is clicked if the others are active they return back to the previous class.
function orgClick(clicked_id) {
var id = (clicked_id);
document.getElementById(id).classList.toggle('org_container_active');
}
.org_container {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #e1dfe1;
border-radius: 15px;
display: inline-block;
}
.org_container_active {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #2bbe43;
border-radius: 15px;
display: inline-block;
}
.org_name {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
.org_logo {
padding-top: 10px;
margin: auto;
width: 100px;
}
.org_info {
padding: 5px 10px 10px 5px;
}
<div class="org_container" id="org1" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 1</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org2" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 2</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org3" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 3</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" class="noselect">
</div>
<div class="org_info">
<p></p>
</div>
</div>
document.querySelectorAll() lets you search for all elements that match a CSS selector. You can use it to deactivate all active containers:
for (let div of document.querySelectorAll('.org_container_active')) {
div.classList.remove('org_container_active');
}

How to highlight image after selection of image using css and jquery

$('img').click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
img {
border: solid 1px red;
margin: 10px;
}
.selected {
background-color: yellow;
box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}
.well {
width: 100%;
}
.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}
.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}
.scroll a img {
width: 100%;
}
.scroll a:focus {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="scroll">
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
</div>
</div>
I have multiple images in a page that is select-able by user. User can select any image by simply click on that image. How can i highlight that image after selection.so how can i highlight selected image using css or jquery
I am getting a yellow outline when i am clicking on the image. And on click image should be shown selected with a shadow till i shift to next image.
Use toggleClass('className') function to highlight the selected images. Below is the working version.
$('img').click(function() {
//New Code replaced here
$(this).toggleClass('selected');
});
img {
border: solid 1px red;
margin: 10px;
}
.selected {
background-color: yellow;
box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}
.well {
width: 100%;
}
.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}
.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}
.scroll a img {
width: 100%;
}
.scroll a:focus {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<div class="scroll">
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
<img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
</div>
</div>

jQuery slider doesn't work in Safari desktop

i have created a jquery carousel, which has only a next/prev functionality, everything is working fine in Chrome whereas there are problems in safari. Thus the images that should be hidden in the slider are appearing at the bottom (visually hidden, i have checked with firebug).
This happens only in Safari.
<div class="slider">
<a class="prev-arrow arrow"></a>
<div class="image-container">
<img alt="" src="http://bit.ly/1Icor0I" class="active">
<img alt="" src="http://bit.ly/1Ubvzly">
<img alt="" src="http://bit.ly/1KDjkg6">
<img alt="" src="http://smu.gs/1IwVgJp">
<img alt="" src="http://bit.ly/1JV31pa">
<img alt="" src="http://bit.ly/1eFfcNZ">
<img alt="" src="http://bit.ly/1DdSEjq">
<img alt="" src="http://bit.ly/1SQshBK">
<img alt="" src="http://bit.ly/1LUnGxU">
<img alt="" src="http://bit.ly/1fO17ic">
<img alt="" src="http://bit.ly/1ha0UHb">
<img alt="" src="http://bit.ly/1IOce80">
<img alt="" src="http://bit.ly/1gsBwwf">
<img alt="" src="http://bit.ly/1LUnHBZ">
</div>
<a class="next-arrow arrow"></a>
</div>
$(document).on("click", ".prev-arrow", function () {
var imageContainer = $(this).next();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() - 300}, 200);
});
$(document).on("click", ".next-arrow", function () {
var imageContainer = $(this).prev();
imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() + 300}, 200);
});
and css
.slider .image-container {
overflow: hidden;
width:500px;
display: inline-flex;
margin-left: 25px;
height: 120px;
}
.slider .image-container img {
display: inline-block;
width:200px;
margin-left: 2px;
}
.slider .image-container img.active {
border: 6px solid #007aff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider {
display: inline-block;
position: relative;
width: 800px;
}
.prev-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
cursor: pointer;
background-image: url("/images/agency/left-arrow.jpg");
background-color:red;
}
.next-arrow {
width: 13px;
height: 23px;
display: inline-block;
position: absolute;
margin-top: 50px;
margin-left: 15px;
cursor: pointer;
background-image: url("/images/agency/right-arrow.jpg");
background-color:red;
}
https://jsfiddle.net/zzLf1pL3/
I don't want to make many changes my HTML code. Because it will make me to re-write a lot of other stuff.
Thanks for help!

How to create a button to every list item which opens a menu over it?

I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?

Slider First image Fix Width

At my home page in slider code i want to fix width for first image. Is it possible from css or html. Because i tried but not work. My current slider css code are bellow.
#slider {
background-attachment: scroll;
background-color: #FFFFFF;
background-image: url("http://silverharmony.in/wp-content/uploads/2012/10/Slider_bg.png");
background-position: 50% 0;
background-repeat: repeat;
display: block;
float: left;
width: 100%;
}
.inner, .wrapper {
display: block;
height: 100%;
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
ul.kwicks {
background-color: #333333;
border-radius: 3px 3px 3px 3px;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
ul.kwicks li {
background: url("../images/icons/ajax_loader.gif") no-repeat scroll 50% 50% transparent;
display: block;
overflow: hidden;
padding: 0;
}
.kw_img {
display: block;
}
.kw_img img {
vertical-align: middle;
}
.kw_shadow {
background: url("../images/icons/overlay.png") repeat-y scroll 0 0 transparent;
border-right: 1px solid rgba(255, 255, 255, 0.3);
height: 100%;
position: absolute;
right: 0;
width: 40px;
z-index: 2;
}
.last .kw_shadow {
background: none repeat scroll 0 0 transparent !important;
border-right: 0 none;
}
My current Slider HTML Code Bellow.
<div id="slider">
<div class="inner">
<ul style="width:960px; height:400px; margin:15px 0;" data-width="960" data-max="660" class="kwicks" id="kwicks-1">
<li class="kwick" style="left: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 192px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-2.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 384px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/3.png&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick" style="left: 576px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img">
<img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/Image-1.jpg&h=400&w=960&zc=1&q=100">
</div>
</li>
<li class="kwick last" style="right: 0px; width: 192px; margin: 0px; position: absolute;">
<div class="kw_shadow"></div>
<div class="kw_img"><img width="960" height="400" alt="" src="http://silverharmony.in/wp-content/themes/cstardesign/cache/timthumb.php?src=http://silverharmony.in/wp-content/uploads/2012/10/1.jpg&h=400&w=960&zc=1&q=100"></div>
</li>
</ul>
</div>
​
Currently my slider looking like this. http://silverharmony.in/
And i actual want to like below link.
http://silverharmony.in/wp-content/uploads/2012/10/slider-screenshoot.png
Slider is using Kwicks jQuery plugin. I added first li item .kwicks-selected class to achive what you are looking for.
Example here jsFiddle

Categories

Resources