Even though it seems very easy I am unable to do it.
I have an image inside div and I should move the image up and down not the entire div.
HTML
<div>
<img src="Image/Scope.png" id="indImage" style="height:auto; max-height:80%; width:auto; max-width:90%;" />
</div>
Javascript
$("#moveUp").on('click',function() {
alert($('#indImage').offset());
if(wind_moveup_click != 7){
$('#indImage').animate({
marginTop : "-=2px"
});
});
But the image is not moving up
Whats the mistake i am doing?
Thanks:)
Here's the FIDDLE
HTML
<div>
<img src="Image/Scope.png" id="indImage" style="height:auto; max-height:80%; width:auto; max-width:90%; position:absolute;" />
</div>
<input type="button" id="moveUp" value="Click Me!" style="margin-top:25px;" />
Javascript
$("#moveUp").on('click', function () {
//alert($('#indImage').offset());
var wind_moveup_click = 0;
if (wind_moveup_click != 7) {
$('#indImage').animate({
marginTop: "-=2px"
});
}
});
You had forgoten a } on your if statement.
You also need to define the wind_moveup_click variable before using it in the if statement, but maybe you did that, just not in the sample you posted to us.
FIDDLE
and this
if (wind_moveup_click != 7) {
$('#indImage').animate({
});
}
Add position:absolute to your img CSS.
#indImage {
position: absolute;
height:auto;
max-height:80%;
width:auto;
max-width:90%;
}
JSFIDDLE
Like #Ohgodwhy correctly said:
the position can be anything other than static
That means that you can choose between absolute, relative, fixed and so on.
But another big problem is that you didn't close the opened { in if. So you have a syntax error.
Try adding the css style position: relative to the <div> tag, e.g.:
<div style="position: relative;">
Edit as,
$('#indImage').animate({
marginTop : "-2px",
});
Related
I have a cover-image like this
When the user hover on my image, I want to :
show an camera icon on the top left, and
hide it back when the mouse move away.
I have tried
CSS
<style type="text/css">
#cover-img:hover{
opacity: .9;
}
#nav-upload-icon{
top: 10px;
left: 10px;
color: red;
z-index: 1000;
}
</style>
HTML
<img id="cover-img" src="/material/img/profile-menu.png" height="130px">
<i id="nav-upload-icon" class="md md-camera hidden"></i>
JS
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass( "hidden" );
});
I couldn't get it to behave what I expected to see.
What is the best way to implement something like that ?
JSFiddle
There is no reason to use JavaScript if that is the actual html code, you can use the next sibling selector with hover.
#cover-img:hover + #nav-upload-icon,
#nav-upload-icon:hover {
visibility: visible;
}
#nav-upload-icon {
visibility : hidden;
}
bind mouseout event to remove add the hidden class again
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
});
$("#cover-img").mouseout(function() {
$("#nav-upload-icon").addClass("hidden");
});
Give position absolute to place it over the image
Fiddle
Go for #epascarello solution. It is the best.
The hover accepts two functions:
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
Fiddle
But obviously the CSS solution is better.
Your almost there. Add a second anonymous function to add the class for mouseleave
$("#cover-img").hover(function() {
$("#nav-upload-icon").removeClass("hidden");
}, function() {
$("#nav-upload-icon").addClass("hidden");
});
According to hover(), you can pass in handlerIn/handlerOut which are synonymous with mouseenter/mouseleave
DEMO
If you don't want to use javascript, wrap a div around the image.
<div class="image-wrap">
<img > <-- your super cool large image
<img class="upload"> <- your super cool icon and stuff absolutely positioned with 0 transparency
</div>
Then in the css you go something like this
div.image-wrap:hover img.upload {
opacity:0.9
}
Don't bother with javascript, it's 2015
This can be achieved without any JS. Using the adjacent selector you can show the icon when #cover-img is hovered on.
#cover-img:hover + img {
opacity: 1;
}
Updated Fiddle
I have a list of photos and I want check marks to appear when the photo is clicked. The page is also supposed to hide the check marks when it loads, but it doesn't do that either right now. The page is at http://lindseymotors.com/addvehicle.php
Here is the relevant JS code, but it gets inserted into the body of the HTML rather than the head tag where the rest of my JS goes. Is this what's causing my issues or is it a problem with the code itself? These bits of code are generated by PHP and inserted into the body HTML tag.
var allPhotos = new Array();
allPhotos[0] = '2000.mercedesbenz.clk430.0.jpg';
var selectedPhotos = new Array();
function selectVehicle(photoID) {
if ( selectedPhotos.indexOf(photoID) > -1 ) {
$('#check'+photoID).zIndex(-1);
selectedPhotos.splice(photoID, 1);
} else {
selectedPhotos.push(photoID);
$('#check'+photoID).zIndex(1);
}
}
$(document).ready(function(){
$('#photo0').click(selectVehicle(0));
$('#check0').zIndex(-1);
});
Of course there are 17 photos on the page itself, but the code is the same for each photo. By default the check marks will be hidden once I get the functionality working.
You use the jQuery.click(function) method. You should pass a function, and not a statement.
Try using this instead:
$('#photo0').click(function() { selectVehicle(0); });
You do not need to keep an array of selected images, you can easily do this with a css class and jQuery's toggleClass, and then when you need to reference the selected ones just select them using the correct selector.
Wrap each car into a div
<div class="car selected">
<img src="http://placehold.it/128x128" />
</div>
Create a css class that will create the checkmark over the car image(using the :after pseudo class) when the div has the class
.selected:after {
content:' ';
width:128px;
height:128px;
display:block;
background:url(http://lindseymotors.com/engine/img/check.png) no-repeat 50% 50%;
background-size:contain;
position:absolute;
top:0px;
left:0px;
}
Then just toggle the class on or off using jQuery's toggleClass
jQuery("carDivSelector").toggleClass("selected");
And when you need to get the selected cars
var selectedCars = jQuery(".car.selected");
Demo
jQuery(".car").click(function(){
jQuery(this).toggleClass("selected");
});
.car {
position:relative;
display:inline-block;
}
.selected:after {
content:' ';
width:128px;
height:128px;
display:block;
background:url(http://lindseymotors.com/engine/img/check.png) no-repeat 50% 50%;
background-size:contain;
position:absolute;
top:0px;
left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="car selected">
<img src="http://placehold.it/128x128" />
</div>
<div class="car">
<img src="http://placehold.it/128x128" />
</div>
<div class="car">
<img src="http://placehold.it/128x128" />
</div>
<div class="car">
<img src="http://placehold.it/128x128" />
</div>
You have an error at your code... look to the console
Uncaught TypeError: $(...).zIndex is not a function ... addvehicle.php:17
It means that the result you got with $('#check'+photoID) don't have a function 'zIndex'
Edit: Well you solved the error. But you have a logical problem when you remove a selected record...
Like the other guy said, there are better ways to do it. but with you wanna solve it now try to use the index to splice, and not the photoId...
function selectVehicle(photoID) {
var index = selectedPhotos.indexOf(photoID);
if ( index > -1 ) {
$('#check'+photoID).css('z-index', '-1');
selectedPhotos.splice(index, 1);
} else {
selectedPhotos.push(photoID);
$('#check'+photoID).css('z-index', '1');
}
}
and try to use thumbnails please..
I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image
Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});
To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)
You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>
With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...
I'm making a collapsible treeView.
I made it all, I just need my + and - icons to toggle whenever they are clicked.
I did the part when I change an icon from + to -, on click, with jQuery with the following code:
$(this).attr('src','../images/expand.gif');
Problem is, I don't know how to make it go other way around, when i click on the node again :)
This should work:
<style>
.expand{
content:url("http://site.com/expand.gif");
}
.collapse{
content:url("http://site.com/collapse.gif");
}
</style>
<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
Look for jquery function toggleClass :)
http://jsfiddle.net/Ceptu/
Html:
<div id="box">
Hello :D
</div>
Jquery:
$("#box").click(function () {
$(this).toggleClass("red");
});
Css:
#box {
width: 200px;
height: 200px;
background-color: blue;
}
.red {
background-color: red !important;
}
Remember that !important is realy important!!!
Lots of ways to do this :D
I wanted to do this without making classes. Inside your click event function, you could do something like this:
if($(this).attr('src') == '../images/collapse.gif')
$(this).attr('src', '../images/expand.gif');
else
$(this).attr('src', '../images/collapse.gif');
add plus as a default img src then define a minus-class to change the image source to minus image
$("selector_for_your_link").click(function () {
$(this).toggleClass("minus-class");
});
I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.