I've tried every possible combination that I could find but it still doesn't work. I'm trying to select the first, second, third... images and change the CSS properties.
The JavaScript:
$("#slider:eq(0)")filter(img).css("display","none");
$("#slider:eq(0)")filter(img).css("visibility","hidden");
The HTML:
<div id = "slider">
<img id = "slider_img5" class = "slider_image" src = "img/slider_image_5.png" width = "1000px" height = "400px" alt = "slider_image_5">
<img id = "slider_img4" class = "slider_image" src = "img/slider_image_4.png" width = "1000px" height = "400px" alt = "slider_image_4">
<img id = "slider_img3" class = "slider_image" src = "img/slider_image_3.png" width = "1000px" height = "400px" alt = "slider_image_3">
<img id = "slider_img2" class = "slider_image" src = "img/slider_image_2.png" width = "1000px" height = "400px" alt = "slider_image_2">
<img id = "slider_img1" class = "slider_image" src = "img/slider_image_1.png" width = "1000px" height = "400px" alt = "slider_image_1">
</div>
The CSS:
#slider{
position : absolute;
height : 400px;
width : 100%;
border-radius : 3px;
-moz-border-radius : 3px;
box-shadow : 1px 1px 5px #bbbbbb;
-moz-box-shadow : 1px 1px 5px #bbbbbb;
}
.slider_image{
position : absolute;
top : 0px;
left : 0px;
border-radius : 3px;
-moz-border-radius : 3px;
}
#slider_img1 , #slider_img2 , #slider_img3 , #slider_img4{
visibility : hidden;
display : none;
}
I hope someone can help me.
UPDATE 1
Thank you for all the answers but none of them work. I'm calling the function on document ready and it is definitely called (tested with alert(); ). I also preset the styles of all images so they are all hidden except for the first one.
UPDATE 2
Sorry guys, there was a semicolon missing. Thank you for all the help!
You need a space between #slider and :eq(0).
Without the space, it's looking for an element #slider that is the first, instead of the first descendant of #slider.
Note however, that :eq is a jQuery extension to selectors. For better performance you should use $('#slider img').eq(n), allowing the entire (valid) CSS selector to be parsed as quickly as possible, and then using .eq to get the element you want.
Alternatively, use the native CSS :nth-child() syntax instead, i.e. #slider :nth-child(1), but note that this uses numbers starting from 1 instead of 0.
Also, your filter(img) syntax as given is incorrect. It should be chained (i.e. .filter) and the parameter should be a valid selector, i.e. 'img' (with the quotes). However if your real HTML is as shown you don't need the filter because it's a NoOp - the previous function call can only return images.
Ok, you can do this with CSS. From what I understand, you want to display the first image, and hide the others? So add:
#slider_img5{
visibility : visible;
display : block;
}
or
#sider img:first-child{
/* same... */
}
The visibility property is unnecessary here because you're already hiding the element with display: none ...
This should work:
$('#slider img').eq(0).hide();
There's really no need to set visibility: hidden once display: none is already set. But that's more or less what .hide() does.
Should be using .find instead of .filter.
.find('img').css("display","none");
Related
I have some images which are way too big when I make the menu they're containing in smaller, that's why I made a second class where I changed the width and height.
I tried to add and remove the class with javascript like this:
if ($('img').hasClass('lorem')) {
$('img').removeClass('lorem')
$('img').addClass('smalllorem')
} else {
$('img').addClass('lorem')
$('img').removeClass('smalllorem')
}
Now this works perfectly fine, but this will add the classes to my other images on the website as well, how can I specify to only give the class "smalllorem" to the elements which have the class lorem? Because the other images don't have the class "lorem" they will still get the class "smalllorem" added on.
-> I don't get why images without the class "lorem" get into the code? I mean I ask if the image has class .. Why does it include the other image elements?
I would look for a CSS solution before moving on to a JavaScript one. But answering the question asked...
I don't get why images without the class "lorem" getting into the code ? I mean I ask if img has class
Because $("img") selects all images, but $("img").hasClass("lorem") only looks at the first image to see if it has the class. Then in each branch of your if/else, you're applying changes to all images ($("img").addClass("lorem");). jQuery's API is asymmetric in this regard: methods that tell you something about the element only look at the first element in the jQuery collection, but methods that change something apply to all elements in the collection.
If I understand you correctly, you want to:
Remove lorem from images that have it, adding smalllorem instead
and
Remove smalllorem from images that have it, adding lorem instead
Basically, you want to toggle both classes. There's a toggleClass method for that.
$("img.lorem, img.smalllorem").toggleClass("lorem smalllorem");
That selects all img elements that have either class, and toggles the classes on them.
Live Example:
setTimeout(() => {
$("img.lorem, img.smalllorem").toggleClass("lorem smalllorem");
}, 800);
.lorem {
border: 2px solid black;
}
.smalllorem {
border: 2px solid yellow;
}
<div>lorem (black border) => smalllorem (yellow border):</div>
<img class="lorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="lorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="lorem" src="https://via.placeholder.com/50.png/09f/fff">
<div>smalllorem (yellow border) => lorem (black border):</div>
<img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff">
<img class="smalllorem" src="https://via.placeholder.com/50.png/09f/fff">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Instead of adding a new class to the image you could just make it responsive :
.img {
width: 100%; //define width
max-width: 250px; //restrict the size (can use min-width aswell)
height: auto; //auto adjust depending on the width
}
var count = 0;
function resize(){
var menue = document.getElementById("container");
count++;
if(count % 2)
{
menue.style.width = "50%";
menue.style.height = "50px";
}
else
{
menue.style.width = "100%";
menue.style.height = "100px";
}
}
#container{
border: 1px solid black;
width: 100%;
height: 100px;
transition: 330ms;
}
#home{
width: 15%;
height: auto;
min-width:10px;
}
menue
<div id="container">
<img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" id="home">
</div>
<br>
<input type="button" value="resize menue" onclick="resize()">
I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary
I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>
Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>
Problem and source code
I'm trying to create <div>s within another <div> at the click of a button. When the button is clicked, a new inner <div> is created (within the outer <div>) with a unique id. I have this part working but here's where I'm running into an issue: I want each inner <div> to have a random margin-top.
Javascript
function pressButton() {
number += 1;
makeDiv(number);
};
function makeDiv(x) {
var innerDiv = document.createElement("innerDiv" + x);
outer.appendChild(innerDiv);
innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + ";display:inline-block;width:48px;height:48px;background-color:#000;");
};
CSS:
#outer {
position:absolute;
white-space:nowrap;
height:118px;
overflow:auto;
width:100%;
padding:2px;
}
Result (after button is clicked 4 times)
<div id="outer">
<innerDiv1 style="margin-top:15;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv1>
<innerDiv2 style="margin-top:23;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv2>
<innerDiv3 style="margin-top:37;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv3>
<innerDiv4 style="margin-top:0;display:inline-block;width:48px;height:48px;background-color:#000;"></innerDiv4>
</div>
The result (which I got from inspecting the inner elements in my browser) looks like everything worked - all the margin-tops are random like I wanted. However, the visual result is this:
As you can see, the black inner <div>s all have the same margin-top. What am I doing wrong? How can I make the created <div>s all have random margin-tops?
The CSS spec requires that a length (other than zero) that is missing a unit be treated as an error (and thus ignored). Therefore, add px to the end of your generated margin number, and all should be well.
Live Demo
Description
This happens, because you set the display:inline-block; property. This makes them all to be in one line, so they will allign to the innerDivx that has the highest margin-top.
Delete the display:inline-block; property and give them float:left;. If you want to keep the gap between them, also add margin-left:5px;. And don't forget that margin-top's value needs a unit. I think you wanted to use px.
Also <innerDivx> is not a valid HTML tag. You should change them to a <div> and use innerDivx as an id attribute. Also your tags use almost the same CSS styles so you should put the same ones to a class and add the class instead.
Full solution code
HTML
<button id="button1">Add box</button>
<div id="outer"></div>
JavaScript
var number = 0;
document.getElementById("button1").addEventListener("click", pressButton, false);
function pressButton() {
++number;
makeDiv(number);
};
function makeDiv(x) {
var innerDiv = document.createElement("div");
outer.appendChild(innerDiv);
innerDiv.className += " box";
innerDiv.setAttribute("id", "innerDiv" + x);
innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
};
CSS
#outer {
position: absolute;
white-space: nowrap;
height: 118px;
overflow: auto;
width: 100%;
padding: 2px;
}
.box {
float: left;
width: 48px;
height: 48px;
background-color: #000;
margin-left: 5px;
}
This is likely caused by the position model used for inline-block elements - they're all being vertically-aligned at their bottom line in a row.
I suggest that you simplify this and use position: block with float: left
http://jsfiddle.net/2y5bJ/4/
I also suggest that you stick to standard elements to ensure cross-browser compatibility - don't create your own elements called innerDiv1 etc, but use div elements with unique IDs.
function makeDiv(x) {
var innerDiv = document.createElement("div");
outer.appendChild(div);
innerDiv.setAttribute('id', 'innerDiv' + x);
innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
};
I think there is no tag available with name
<innerDiv1>
This may be the cause.
So, I use this Javascript for hide - show effect:
function effect(id) {
var h = document.getElementById(id);
h.style.display = ((h.style.display != 'none') ? 'none' : 'inline');
}
HTML:
<div class="div">
<img src="http://i.imm.io/1jf2j.png"/>
Home
</div>
and CSS:
.div {
background: #000;
}
.div .url {
font-size: 17px;
}
Here you can test (and edit!) the code: http://codepen.io/anon/pen/dhHiw
JSFiddle doesn't work for me.
All is good. Except when you click on image. It's moved 1px above. Should I use another image?
Where is the problem? And possible solutions. Thank you!
You are basically removing the text element. Since the <div class="div"> does not have a set height, it depends on the elements inside it. When the text is not displayed (display=none), the div will resize to only the image.
You can fix this by either setting a height for the div, or by setting visibility=hidden for the text instead of display=none. When making it hidden, it still has the same dimensions, but it's invisible instead.
I need to know how one can get the maximum possible width of a div. Generally, a <div>'s width is limited by it's parent, meaning that it can not be larger than a certain amount. How that certain amount can be calculated?
I need this to calculate if the text inside the current <div> has overflown, (since the only way to detect a text overflow is to compare it's current width to its current clientWidth).
Thanks!
A couple ways to do this, let's start with your div...
<div id='mr_cleaver'>
<div id='beaver'>Blah</div>
</div>
...and then someJavascript:
//Method One: Find the width of the div's parent
var max_beaver_width = $('mr_cleaver').offsetWidth
//Method Two: Max out the div, find length, return to original size.
var beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = "100%";
var max_beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = beaver_width + 'px';
//Method Three: Check for overflow
$('beaver').scrollWidth > $('beaver').offsetWidth ? alert("Over") : alert("Within")
Thanks Steve!
Your suggestions were very helpful. Although none of them worked for me(probably I didn't explain my situation very well), but using your hints, I could find a way to detect text overflow:
/* specifying the height of 'beaver'*/
var font_size= $('beaver').css("font-size");
font_size = parseInt(font_size.replace(/[a-z]*/gi,''));
var maxHeight = font_size + 4; // 4 is to make sure that the font fits in the maxHeight
/*now calculate current height*/
$('beaver').style.overflow-y:visible;
$('beaver').style.overflow-x:hidden;
var cuurentHeight = $('beaver').clientHeigth;
/* check whether overflow is occured*/
if(cuurentHeight > maxHeight){
//overflow has been occured
}
If you want the div to be 100 % in width with no space between the edges, you can try to add this simpel CSS style to the div:
<style type="text/css">
#FullWidthDiv { // EDIT
position: absolute; // If you use 'fixed' as position, then the div
display: block; // won't become smaller when the screen is at is smallest.
float: left; // The fixed position is good when you for example want the
width: 100%; // menu to stay in place.
background-color: #06F;
height: auto;
left: 0px;
top: 0px
}
</style>
<html>
<body>
<div id="FullWidthDiv"></div>
</body>
</html>
You can append a div into parent element to measure it.
var test = document.querySelector('#test');
var div = document.createElement('div');
div.style.width = '10000px';
test.appendChild(div);
var maxWidth = test.offsetWidth;
test.removeChild(div);
alert(maxWidth);
#test {
display: inline-block;
max-width: 100px;
}
<div id="test"></div>