I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size:
.frontpageimage {
height: 200px;
width: 200px;
background-image: url('tile1.jpg');
}
This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this:
$('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');
.frontpageimagehigh {
height: 420px;
width: 200px;
}
(note: currently it is hard coded to select the 2nd image - will work on the randomisation later.)
Trouble is if I insert the above code above where Isotope is called it doesnt work.
If I insert the above code after Isotope is called, it works but the images overlap - ie: the image changes size after Isotope has rendered them.
Does anyone know how to perhaps add this to the existing isotope script? Or would anyone have any suggestions for me? Please let me know if clarification is needed.
Thanks
OK, so I found adding my own class to use instead of isotope-item and adjusting my JQuery as well as moving it back above the isotope call did the trick:
$('#isotopecontainer .item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');
<div class="item isotope-item"...
Hope this helps someone. Please msg me if you need more info
Related
I want to create an infinite fullscreen slider in Html + Css + JavaScript (Plural). I don't want to use libraries, like "Slick" or something like this. The first slide should be in the senter. I need to see half of the third block and half of the last block(example in the photo). Can anyone help, please ?
Example: https://i.stack.imgur.com/FORxN.jpg
You can do a full-screen container and then place your images in it, and with a little bit of JS you can achieve it.
Create a div and inside the div, place your images.
.container{
width: 100%;
height: 100%;
img{
width: 100%;
height: auto;
This is for the HTML and CSS, but you can always mess around with the height and width and finalize with what suits you and for JS I'd recommend you watching this video or this video. I've previously watched'em both and they are pretty easy to understand.
I have implemented the FlexSlider slider. It works great but I cant seem to find how to make the navigational "dots" smaller or bigger.
I was hoping it used images but I cant find the images, I think they are created dynamicly using JS.
Something like below would be perfect
$(window).load(function(){
$('.flexslider').flexslider({
navigationDotSize: '30px',
start: function(slider){}
});
Silly me,
I should know by now CSS does all this. haha
.flex-control-paging li a {width: 30px; height: 30px; }
If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!
Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well
I've been working with the Galleria package to create a image gallery. I'm now wanting to add a deletion tool so that a user can delete any image they so desire.
Using this demo as a baseline, I've taken the elements of code which I need and tried to incorporate it into my gallery page here. The problem is, is that I cannot get the 'bin' icon to appear at the bottom of each image, and hence I'm unable to see whether the function which makes the image disappear from screen actually works. I don't need the code that deletes the image from the server. I'll be dealing with that later on.
I'm really quite new to Javacript and jQuery, so please feel free to speak down to me. But I've been working on this for weeks now and I just can't find a solution.
I just wondered whether someone could perhaps look at this and let me know where I'm going wrong.
Many thanks and regards
adding this style to your CSS rule:
.btn-delete {
width: 14px; height: 14px;
margin: 38px 0 0 66px;
position: absolute;
}
.icon-remove { background-position: -312px 0; }
.icon-white { background-image: url('http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png'); }
and in your jQuery:
$(".galleria-image").append(
"<span class='btn-delete icon-remove icon-white'></span>");
$(".btn-delete").live("click", function() {
var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src"));
return false;
});
this will do something like:
Now, you can simply send an ajax request using $.get() for example, passing the ID/SRC of the image that the user wanted to delete and refresh your code/remove all images that belong to that selected one.
I want to create a jquery script that works like the iphones "slide to unlock" bar. i want to have 2 divs, the container, and the slider. i want to be able to drag the slider to the right, and when the slider reaches the very right of the container, have it do something.
i don't want to use jqueryUI in doing this, that library is too bloated, i've seen some other drag and drop scripts out there but a lot of what i've tried has utterly failed, so now i'm back to step 1 wondering if there's a really simple way to drag a div and when it reaches the very right of it's container, to 'do something'.
i would REALLY appreciate any help at all, i think my hair is falling out over this.
nick
I'd suggest using a library that already does what you're looking for, in terms of actually sliding an object.
jquery UI
This is of course a link to the JQuery UI library. However, most UI (User Interface) libraries come with the ability to slide objects, so choose whichever one you're most familiar with. If you're not familiar with one, I'd suggest doing some research.
The JQuery library should give you the ability to slide the object and check the slide objects value, so you'll know when to run your lock/unlock script. As mentioned, though, I'm sure most other libraries will give you the same abilities.
Well, you can attach to the mousedown event, then on mousemove set the location of the div to be the location of the mouse (offset by the original offset), until mouseup (revert to original position), or sufficiently to the right "do something". Sounds simple enough?
So I know this post is REALLY old, but I'm trying to execute the solution that McKay proposed. I'm really quite new to jquery so don't roast me for this :D Maybe someone has a hint on how I can get this to work.
EDIT: Oh, and I'm also on a solution for this using jquery UI.
$(".slider-handle").mousedown(function() {
$(".slider-handle").on("mousemove", function(){
$(".slider-handle").css("margin-left" === "event.pageX" + "px");
});
});
.unlock-slider {
background: #d1d1d1;
width: 300px;
height: 50px;
position:relative;
}
.slider-handle {
height: 70px;
width: 70px;
border-radius: 50%;
background: tomato;
position: absolute;
z-index: 10;
}
<div class="slider-wrapper">
<div class="unlock-slider">
<div class="slider-handle">
</div>
</div>
</div>