Hi there I'm currently working on a catalog of sorts and am currently trying to make an image enlarge when it's clicked on. I have the JavaScript functionality like onmouseclick working perfectly but can't seem to get the JQuery that's inside the enlarge function to target an individual image. For example if I try to enlarge the second record in the list all images get enlarged, not just the one I selected.
Here is the function as you can see below I'm setting the product image width and height. I want to have functionality like the above styles using x. Is there a way to achieve this? Any information would be appreciated.
function normalImg(x) {
x.style.fontSize = "15px";
x.style.maxWidth = "90%";
x.style.height = "auto";
$('.product').width(350);
$('.product').height(250);
}
Also the information that's being set by the x.styles in the function above is being used in an xmlParser function, I don't know if that matters at all.
If I've understood your question, your problem is that this jQuery selector:
$(".product")
selects everything with class product, and not just the one that you clicked on. To fix this, I'd probably but the event listener on the product class, so that you can use "this" to refer to the product that was clicked, and then find and resize an img within it. The overall over might look something like this:
$('.product').on('click', function(){
$(this).css({width: '350px', height: '250px'})
.find('img').css({maxWidth: '90%', height: 'auto', fontSize: '15px'});
});
Related
I have a problem when trying achieve hover effect on mapped image. I have an image with mapped areas and on all of them I want to show a different image when hover.
You can see my work so far here:
http://mantasmilka.com/map/pries-smurta.html
The problem is when I hover over area it show the image, but when I move the cursor (not leaving the area) it starts flickering. It takes area space pixel by pixel.
I've tried working with Javascript and jQuery solutions:
Javascript:
mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"
jQuery:
$('.hide').hide();
setTimeout(function(){
$("#area-kaunas").mouseenter(function(){
$('#Kaunas').show();
});
$("#area-kaunas").mouseleave(function(){
$('#Kaunas').hide();
});
}, 500);
Why not just use hover() inside of jQuery? I'm also unsure why you bind the events after a 500 millisecond timeout?
$('.hide').hide();
$("#area-kaunas").hover(function() {
$('#Kaunas').show();
}, function() {
$('#Kaunas').hide();
});
There is a css property called "pointer-event" which gives the value "none" to the img tags that overlap in the mapped image and works as you need it. This is the documentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
The problem will always be the compatibility of browsers.
I want to be able to dim a web page when a specific image is clicked on, using JavaScript. I had a look around and managed to get this far:
I have to create the image div on the fly, as indicated below. To change the screen opacity I created a ‘screen’ div inside the html document and set its opacity to 0. It works. The aim is to be able to add an attribute to the image div so that when it is clicked, the opacity of the screen div is changed to, say, 0.5. This solution below works, but in the sense that the screen div immediately changes opacity when I open it, rather than when the image is clicked. Also, I need to somehow figure out how to unset the opacity change once the image is clicked a second time. I guess I need a boolean + if-statement for this but can’t figure out how it might work in this situation. Any help will be greatly appreciated.
var img = document.createElement('img');
img.src = “images/myImage.jpg”;
img.onclick = dimmerSwitch();
document.body.appendChild(img);
function dimmerSwitch (){
var elem = document.getElementById("dimmer").style["opacity"] = "0.55";
}
You really don't need var elem variable in dimmerSwitch
function dimmerSwitch (){
document.getElementById("dimmer").style.opacity = "0.55";
}
would do the trick!
Also to toggle, the neater method would be to define css classes and toggle between them in your dimmerSwitch function, like
.dimmed{
opacity: 0.55;
}
Here's a neat tutorial which explains how you could do that: http://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-manipulation-with-data-states/
I am looking for either an open source solution already available or for someone to point me in the right direction to find this. I am creating a Firefox extension that works for elements from the DOM. In Firefox and Chrome, there are element inspectors that highlight the region and/or element that your mouse is currently hovering over, such as the div it is currently hovered over or a button if it is hovered over that. I'm looking for how to implement that functionality into my own extension. Let me know if there are any solutions to this, thanks!
try something like this:
var lastBoxedEl;
function moused(e) {
var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
if (lastBoxedEl) {
lastBoxedEl.style.outline = 'none'
}
lastBoxedEl = target;
target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);
I did something in the past for a demo. Here is the source opened for your request:
https://github.com/kashiif/hilight-dom-element-on-hover
Note that this is not complete and may require finishing e.g.:
The red box is left behind after the element is clicked.
There is a little re-flow of element because a border is being added. You may modify the box class such that box-sizing is set to border-box
If you like you may send me a pull request of the changes.
I'm trying to get a div #sidebar that rests above my main #stream div to move from position left: 565px; to position left: 0px; onClick of one image in the #sidebar div (the red arrow in the images below), and do the reverse onClick of the same image. I know I have to use JavaScript, but I have no idea what the code would be. If possible, I would like to animate the div move too.
The pre-clicked state (the arrow will be my link):
The post-clicked state:
Thanks in advance!
If you want to animate it using animate have a look at this. It should get you pointed in the right direction:
http://jsfiddle.net/3DpfJ/5/embedded/result/ - Full screen result
http://jsfiddle.net/3DpfJ/5/ - source code
So what I simply did was this:
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
This is probably the simplest way of doing it via animation. Duration is set to 400 so it will take 0.4 seconds to animate. Adjust as you please.
This script should be executed as soon as you load the page to ensure that the expand works. You will want to create <script type="text/javascript"></script> tag in the header and put the code there.
Hope it works for you.
$('#sidebar').click(function(){
$(this).animate({"left": "0"});
});
jquery uses toggle to handle this. It works better than a regular "animate" because it combines the hide and show into one function (toggle).
You might need to do some tweaking to fit your needs but this should get you started:http://jqueryui.com/toggle/
First of all, I am not an advanced JQuery developer, however, I have been creating what I call Strips Menu with JQuery, you can see it here by clicking the Preview link on top:
http://jsbin.com/uwopu3/edit
When I click on a strip, it promptly shows the contents relevant to hovered strip but I need sliding effect something that has been done on this site:
http://jeemsolutions.com/
I tried giving the animate function a time of 1500, but still no sliding effect.
How do I give it sliding effect like that of jeemsolutions for which the link is provided above.
Thank You
You are using the animate function wrong. It takes the CSS properties you want to animate to as arguments, so try something like:
var w = $('#slide').width() - $('.bar').size() * $('.bar').width() + 10;
$(this).css('text-indent', '0px');
$(this).animate( {width: w}, 500);
I know this might sound wrong, but why don't you simply use jQuery Accordions? It does what you need, and is supported against different browsers and all that.
Cheers