Target an image in Jquery - javascript

I need to target just the image, the only problem is is that the image is set as a background on the class "hero1project3".
I need it to stay in this class, is there a way in my jquery that I can tell just the image to blur for example ".hero1project3 img"
HTML:
<div class="hero1project3">
<div class="blur">
</div>
<div id="hero1titleproject1">
<h1>Information Design: <br>Zumerset Cyder Appl's.</h1>
</div>
Jquery:
$(document).scroll(function(){
if($(this).scrollTop() >0){
$('#hero1titleproject1').css({'webkit-filter':'blur(5px)', 'filter':'blur(5px)'});
} else {
$('#hero1titleproject1').css({'webkit-filter':'', 'filter':''});
}
});
CSS:
.hero1project3 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../Information_Design_Zumerset_Project3_hero.jpg);
background-position:50%;
background-size:cover;
transition:all .5s
}
div.project.project3img2 {
background-color: rgb(255,255,255);
}

Using img as a selector means you are trying to select an img tag underneath hero1project3, which does not exist since you are using a background image set via CSS to .hero1project3.
See this answer to know how to blur a background image: How to apply a CSS 3 blur filter to a background image

Related

How to change a css class selector using javascript

Hi guys i'm attempting to change the top location of a popup using JavaScript. Here is the CSS code:
.popup .content {
position:absolute;
top:34.2%; //This is what i'm attempting to change
left:183%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:647px;
height:333px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
And here is the javaScript
function togglePopup(){
if(document.getElementById("Check1").checked){
//Change popup content's top position here
document.getElementById("popup-1").classList.toggle("active");
}
Here is some of the HTML if needed
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
//inputs go in here
</div>
Try:
function togglePopup() {
if (document.getElementById("Check1").checked) {
//Change popup content's top position here
document.getElementById("popup-1").style.top = '10%';
}
}
(not tested)
I see that you want to modify the
.popup .content {
top:34.2%; //This is what i'm attempting to change
which is the second child of the container with .popup class
but in javascript you get the parent container, which would be .popup class or #popup-1 id
With the code you provided I can't manage to test , but there might be an issue there

How to turn this CSS with plain javascript or jQuery instead of hover to on click

HTML
<div class="flip3d">
<div class="back" >Box1-I</div>
<div class="front">Box1-Front</div>
</div>
<div class="flip3d">
<div class="back" >Box2-back</div>
<div class="front">Box2-Front</div>
</div>
<div class="flip3d">
<div class="back" >Box3-back</div>
<div class="front">Box3-Front</div>
</div>
CSS
.flip3d{
width:200px;
height;200px;
margin:10px;
float:left;
}
.flip3d>.front{
position:absolute;
transform:perspective(600px)rotateY(0deg);
background:#FC0; width:200px; height:200px; border-radius:6px;
backface-visibility:hidden;
transition: transform 1s linear 0s;
}
.flip3d>.back{
position:absolute;
transform:perspective(600px)rotateY(180deg);
background:lightgreen; width:200px; height:200px; border-radius:6px;
backface-visibility:hidden;
transition: transform 1s linear 0s;
}
JS
$(function(){
$('.flip3d').on('click',function(){
if($(this).children('.front')) {
$(this).children('.front').css({'transform':'
perspective(600px)rotateY(-180deg)'});
if($(this).children('.back')) {
$(this).children('.back').css
({'transform':'perspective(600px)rotateY(0deg)'});
}
});
});
what i want to do is to make the div flip the same exact thing but on click instead of hover to be compatible with touch screen it might be noob question for some of you
thanks in advance:)
Edited :
thanks to #AaronEveleth logic
i have found the solution with jQuery now when i click it flip to back but when i click again it doesn't go to front again any suggestion why?
Where you currently have the code inside the :hover blocks, you can change the block to a different class, something like click-class. Here is an example of how you can do that:
/* The code you had for on hover */
.flip3d:hover >.front{
transform:perspective(600px)rotateY(-180deg);
}
.flip3d:hover >.back{
transform:perspective(600px)rotateY(0deg);
}
/* An example of what you can change it to */
.click-class-front {
transform:perspective(600px)rotateY(-180deg);
}
.click-class-front {
transform:perspective(600px)rotateY(0deg);
}
Then in your javascript/jquery code, you can do something like this:
$('.flip3d').click(function(){
if($(this).children('.front')) {
$(this).children('.front').toggleClass('click-class-front');
}
if($(this).children('.back')) {
$(this).children('.back').toggleClass('click-class-back');
}
});
When you click on the div with class front or back, it will check which one was clicked based on the class that is applied to them. It will then toggle(add or remove depending on previous state) the class, and the code in the CSS with that class will be applied.
Note to SO Community: Not able to comment, so I apologize about my improper use of an answer

javascript code and zindex

I am having problems with getting the z-index to change using javascript can any one help me on where I am going wrong,
what I am trying to do is have a box appear on top on another box once a button is clicked but it does not seem to work.
function toggleupload(){
var but = document.getElementById('picbutton').innerHTML;
if (but == "Change Picture"){
document.getElementById('picbutton').innerHTML = "Hide upload box";
document.getElementById('uploadbox').style.zIndex = 2;
document.getElementById('profilebasic').style.zIndex = 1;
}
if (but == "Hide upload box"){
document.getElementById('picbutton').innerHTML = "Change Picture";
document.getElementById('uploadbox').style.zIndex = 1;
document.getElementById('profilebasic').style.zIndex = 2;
}
}
#profilebasic{
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
}
#uploadbox {
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
z-index:1;
background-color:#F00;
}
#uploadbo{
text-align:center;
width:300px;
height:300px;
z-index:3;
}
<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button onclick="toggleupload();" id="picbutton">Change Picture</button>
</div>
The z-index property only works on positioned elements, so you need to explicitly set the position on profilebasic like:
#profilebasic {
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
position:absolute;
}
jsFiddle example
(note that I also had to set some CSS on your button otherwise it would have ended up under your positioned divs.)
Since uploadbox already starts out in front I assume you want to swap these.
Based on z-index rules, an absolutely positioned div will still appear in front of a non-absolutely positioned div unless its z-index value is negative.
That is, use a negative z-index for the box you want to be behind.
http://jsfiddle.net/X54gr/

Using javascript to display text on top of an image on mouse over

I am new to javascript and would like to have an image that is fully displayed but when you mouse over the image text appears over the top in a div tag and fades the image in the background.
This is my attempt however poor and it is not working.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
obj.filters.alpha.opacity=50;
}
function viewObj(obj1, obj2) {
fadeImg(obj1);
obj2.style.opacity=1;
bj2.filters.alpha.opacity=100;
}
</script>
<div>
<img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/>
<div id='txt1' class='image_box_text' >This is image box one</div>
</div>
Thanks in advance.
This should get you started.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
}
function viewObj(obj1, obj2_name) {
var obj2 = document.getElementById(obj2_name);
fadeImg(obj1);
obj2.style.opacity=1;
}
</script>
First, you cannot simply call an object by an id as you did in viewObj. You must do a document.getElementById on its id. Next you will have to check if filters exists (it only does in IE). A better way to do this is to make .faded and .hidden classes in your stylesheet and have the hover event trigger the adding and removal of them.
Here's this code in action: http://jsfiddle.net/WpMGd/

Change CSS position of each element in a DIV using JS or JQuery

I have a Div with position:relative which contains "one or more" images inside it with postion:absolute with some top and left values. I need to toggle the position attribute of ALL THE IMAGES at a time between Absolute and Auto/Relative with a button using JS or JQuery.
Is there any way to work with all these child IMAGES at a time?
try the following:
html
<div class="wrapper">
<img src="http://dummyimage.com/15x15/000/fff" class='absPosition'>
</div>
<input type="button" value="change position">
css
.wrapper {
height:300px;
position:relative;
}
.absPosition {
position:absolute;
bottom:0;
}
jQuery
$(":button").click(function() {
$("img").toggleClass("absPosition")
});
Demo: http://jsfiddle.net/ZRDdB/
Just use a jQuery selector which encompasses all of the images within your div. If, for example, your div had an id of "divId" then to set the position to relative of all the images within that div, you would use:
$(document).ready(function() {
$("#button").click(function() {
$("#divId img").css("position", "relative")
});
});
This would be best achieved using both CSS rules (as in CSS rules, not JS assigned inline styles) and jQuery's .toggleClass() method.
If you've got markup like the following:
<div id='foo'>
<img />
<img />
</div>
and CSS like the following:
div#foo { position:relative; }
div#foo img { position:relative; }
div#foo img.absolute { position:absolute; }
You can easily toggle that the IMGs' position rule using something like
$('button').click(function() {
$('div#foo img').toggleClass('absolute');
});

Categories