I have 6 images.
When they are rolled over the images change using css hover.
When the images are clicked the original image appears (again using css) but I want the rest of the images to dim when one is selected.
I've been looking into various JS option but just cant seem to get it to work. Does anyone have any suggestions?
Another solution is adding a class to the selected image and the images parent.
This makes it easier to maintain as the styling is all done in css.
Quick example here:
css
.img{
display:inline-block;
height:40px;
width:40px;
border:1px solid black;
}
.clicked .img{
opacity:0.3;
}
.clicked .img.selected{
opacity:1;
background:red;
}
js
$('.img').on('click', function() {
$('.img').removeClass('selected');
$(this).addClass('selected');
$('.container').addClass('clicked');
})
html
<div class="container">
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
</div>
http://jsfiddle.net/renekoch/y6YCc/
Related
I'm trying to implement this codepen into an html page. The idea is that it fades away after everything on the page loads. This is what I currently have.
HTML
<div class="js">
<body>
<div id="preloader"></div>
<!-- WEBSITE -->
</body>
</div>
</html>
(* ALERT: You cannot try to close a div tag after having closed the body element *)
CSS
Lots of CSS so I put it on codepen
JQUERY
jQuery(document).ready(function($) {
$(window).load(function() {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
});
});
So it seems to be working fine except I can't seem to figure out the purple background. The spinner works perfectly but if I put background: #774CFF; in the .js div#preloader it doesn't cover the entire page in purple, only within the spinner.
You assign the background-color on the #preloader, which has 30px width and height.
So, either you apply the background-color to the body
body{
background-color:#774CFF;
}
either you wrap the #preloader with another element and stretch it to fit the screen:
HTML
<div id="preloader-wrapper">
<div id="preloader">
</div>
</div>
CSS
#preloader-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#774CFF;
}
I'm trying to create a scrolling effect that preferably doesn't use javascript (CSS only) but I understand if it's not possible, just exploring options.
My page looks like this:
When scrolling down I want the background image to have a parallax-like effect, staying static while the body's background and frame move around it.
Here's a sample of code to work with:
http://jsfiddle.net/J8fFa/7/
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
I can see how this would work if the image was the background for the body, but as this is sitting on top of the body is there any way I can manipulate it to have a similar visual effect?
change your .image-bg class to:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
this will prevent the image from scrolling
updated fiddle: http://jsfiddle.net/J8fFa/9/
Here's what I'm trying to do. I want to create a sort of slide show effect on the main content. If the user click on the right or left arrow on this div, it will move forward/backward to the next "slide/text". The content inside this div or slide includes image, texts, hyperlinks, and can be styled by CSS. My question is, what's the best route to create this effect? I do not want to use flash. I am thinking of a combination of HTML5, CSS3, and jQuery and/or javascript. Does anyone have or know of examples similar to what I've described? Your suggestions or opinions are much appreciated.
There is lot of slide show scripts available, you can also try this
<div class="mosaic-slide" style="z-index: 10;">
<!-- The mosaic-slide div and the tiles are generated by jQuery -->
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
</div>
</div>
css:
#mosaic-slideshow{
/* The slideshow container div */
height:500px;
margin:0 auto;
position:relative;
width:670px;
}
.mosaic-slide{
/* This class is shared between all the slides */
left:80px;
position:absolute;
top:25px;
border:10px solid #555;
/* CSS3 rounded corners */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.tile{
/* The individual tiles */
height:60px;
width:60px;
float:left;
border:1px solid #555;
border-width:0 1px 1px 0;
background-color:#555;
}
Demo: http://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.html
Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?
Current Code :
<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple <h2> tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Expected Code
<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don't want.
And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.
How did you guys get around this?
one, of the tons of solutions
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single</span>
<span>line of text and css. Right now i am using</span>
<span>multiple <h2> tags and a css class to achieve this effect.</span>
<span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
<span class="clear"></span>
</h2>
with this styles in <head>
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
float:left;
}
h2.heading span {
clear:left;
display:block;
float:left;
background:#fff;
padding:1px;
margin:1px;
}
h2.heading .clear {
clear:left;
margin:0px;
padding:0px;
float:none;
}
</style>
EDIT: second variant
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
display:inline-block;
font-size:20px;
}
h2.heading span {
background:#fff;
padding:1px;
margin:1px;
line-height:30px;
}
</style>
with this markup
<div style="width:300px;">
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
</h2>
</div>
No need of CSS or JavaScript, just use the <br> tag.
<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br>
line of text and css. Right now i am using
<br>
multiple <h2> tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>
Or did I misunderstand the question?
I kind of solved the problem. Take a look here http://jsfiddle.net/7nafE/ (remove the div to see the responsivness)
HTML:
<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Same as your HTML except that I used a span instead of h2
And css:
.heading {
background: white;
line-height:2em;
padding: 0.3em;;
}
body { /*not really neccessary to show, but anyway*/
background: limegreen;
font-family: verdana;
color: #999999}
Problem with that is that there are no paddings to the left and right of the text.
And also. you can't get your line breaks where you want. It is all up to which container you place it in. It is, if you asked me, just good because that makes it responsive in a way a <br /> or something like that wouldn't do.
i am trying to animate a div, what i need is when click a button i want to hide a div and show another div that is next child.
here is my fiddle.
I am trying to do like this this site here you can see when you click the learmore link which is in the top-right hand side then another div content open like sliding.
DEMO jsBin
var c=0;
$('.slide:gt(0)').hide();
$('#learn').click(function(){
c++;
$('.slide').eq(c).css({zIndex:c}).show('slow');
});
HTML:
<div id="slider">
<div id="learn">Learn more</div>
<div class="slide s1">I'm slide 1</div>
<div class="slide s2">I'm slide 2</div>
<div class="slide s3">I'm slide 3</div>
</div>
CSS:
#slider{
position:relative;
width:340px;
height:340px;
}
#learn{
position:absolute;
right:0px;
z-index:2; /*set a higher Z-index if you have more slides*/
cursor:pointer;
}
.slide{
position:absolute;
right:0px; /*important!! To 'slide' from right to left*/
top:0px;
width:300px;
height:300px;
}
If you have a defined number of slides you can keep the code intact, in the other hand I'd suggest you to - when the last slide is reached - hide the #learn programatically with jQuery. Let me know if you need help with that one.
Happy coding
Will something like this suffice:
$('#divtohide').fadeOut('slow', function() {
$('#divtoshow').fadeIn('slow');
});
You can change the ids as needed.
EDIT
Check this fiddle: http://jsfiddle.net/MR5yv/1/
EDIT #2
Check this fiddle: http://jsfiddle.net/MR5yv/2/