Clicking on the image should show div near it (.show() in jQuery).
But how can i attach div to that image? Is it done with pure css, or javascript?
I tried several "position:absolute", but can't attach it near image.
How it should be done?
It's pretty straightforward, you need to compute the .css({top:___,left:___}) such that the underlines are filled with computations based on the clicked image's .position().top and .position().left.
something like this:
$(document).ready(function() {
$('#someim').click(function() {
showDiv($(this), $('#somediv'));
});
});
function showDiv(sender, object) {
var pos = $(sender).offset();
var width = $(sender).width();
$(object).css({ "left": (pos.left + width) + "px", "top": pos.top + "px" });
$(object).show();
}
<img id="someim" width="250" height="61" alt="Stack Overflow" src="http://sstatic.net/so/img/logo.png">
<div id="somediv" style="display:none; margin-left:10px; color:Red">sd</div>
Related
How can I resize my image like they did here website.
When you zoom in that picture where it says "Radiant Power" , it does not go bigger. Just stays the same size compared to the other elements on the site.
Can you guys give me some tips on how to do that, I can't seem to find the answer anywhere.
Here's my website: site
It's on a free domain so it will load slow.
As you can see I made the big picture work ,because it's 100vw so it's much easier to handle... it stays the same when you zoom in. Now i want the little one to be resized when I zoom in and keep its aspect ratio like that website I showed.
Here's the jsfiddle
That's how I did the large picture resize:
$(function () {
var scr=screen.width;
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else{
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
$(window).resize(function () {
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else {
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
});
});
You just make image scale on percent of total width/height like this:
https://jsfiddle.net/bhdpmhgc/1/
#test{
width: 10%;
height: 10%;
}
<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">
What is the correct way to get the size of the 'paper' object with SnapSVG, as soon as it has been created?
My HTML looks something as follows:
<div id="myContainer" style="width: 900px; height: 100px" />
And then the Javascript code:
function initViewer(elementId) {
var element, elementRef, snap;
elementRef = '#' + elementId;
element = $(elementRef);
element.append('<svg style="width: ' + element.width() + 'px; height: ' + element.height() + 'px; border: solid 1px black;"/>');
snap = Snap(elementRef + ' svg');
console.log(snap.getBBox());
}
What I observe here is the bounding box has '0' for all attributes, so I can't rely on the bounding box values here. Are there any ways of doing this, without have to go to a parent element?
What I am essentially wanting form all this is the width and the height of the SVG, so I can draw the shapes of the appropriate size for the view.
JS Fiddle, illustrating the issue: https://jsfiddle.net/ajmas/kdnx2eyf/1/
getBBox() on a canvas returns the bounding box that contains all elements on that canvas. Since there are no elements in your SVG, it returns all 0s.
But the SVG element is just like any other DOM element - you could get its width and height in a number of different ways. You could retrieve the object by ID or whatever and use .offsetWidth or .offsetHeight.
You could also traverse the object itself. I have no idea if this works on all browsers but if you really want to use the snap object, you could do this:
snap=Snap(elementRef + ' svg');
snap.node.clientHeight
snap.node.clientWidth
But you also just set the height and width of it using the div it is contained in. Why can't you just use element.width() and element.height()?
I find that getBBox() doesn't work on a paper (a Snap "drawing surface"), only on elements in a paper. But node.clientWidth works for me for Snap.svg papers. Demo below.
var paper = Snap("#mySVG");
paper.rect(0, 0, 200, 100).attr({fill : "#cde"});
//var tMessage0 = paper.getBBox().width; // throws an error
var tMessage1 = paper.text(4, 24, "paper width = " + paper.node.clientWidth);
var tMessage2 = paper.text(4, 48, "text width = " + tMessage1.getBBox().width);
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<body>
<svg id="mySVG" width="200" height="100">
</svg>
</body>
I'm trying to achieve a very simple objective which is to magnify an image. After some searching on the net, it seems like most of the js scripts out there required two image ( one for thumbnail size and another one for zoom-ed size). I'm wondering if I am only having one image, is it still possible to achieve the zoom effect?
I wish to achieve something like this link jQuery ImageZoom with only one image, of course, in a free edition.
I've recently wrote Magnifier.js, if you don't provide the large image the thumbnail will be used instead
You can use one image to zoom with Magic Zoom - you just reference the same large image in both the src and the href and you use width and height to force the img smaller to the size you want.
For example:
<img src="your-big-image.jpg" width="300" height="150">
This approach is fine, though it isn't recommended because it creates a delay while the large image downloads.
You can use the trial version of Magic Zoom free of charge if you don't mind the message shown in the corner.
there is not any complex codes to be written for this purpose
you only need consider these steps
1.create magnifier glass element and set the image that you want to be magnified as background image then set scale(1.5) or 2 for that(you should consider that your glass element can be say 50px in 50px while your background image is 500px in 500px that is help us do the trick)
2.when your mouse pointer come in picture box the magnifier glass should pursue the pointer thats where jquery come in
3.you should get offset of the pointer then change the background-position of
the magnifier glass at same time.
jquery code would be something like this
$(".mpboxpic").mouseenter(function () {
$("#zoombox").css({ "background": "url('" + $(this).attr("src") + "') no-repeat" })
//با این کد تصویر پس زمینه دارای سایز یکسانی خواهد شد
$("#zoombox").css({ "background-size": $(this).width() + "px " + $(this).height() + "px" })
}).mouseleave(function () {
$("#zoombox").hide()
var tg = $("#zoombox").css("background-image")
px = 0;
py = 0;
})
$(".mpboxpic").mousemove(function (p) {
if (px==0) {
$("#zoombox").fadeIn(200)
}
//با کد های زیر مرکز دایره دقیقا در زیر موس قرار میگیرد
px = p.pageX-$("#zoombox").height()/2
py = p.pageY - $("#zoombox").width() / 2
$("#zoombox").css({ "top": py + "px", "left": px + "px", "position": "absolute" });
var my = p.pageY - ($(this).offset().top + $("#zoombox").height() / 4)
var mx = p.pageX - ($(this).offset().left + $("#zoombox").width() / 4)
var coord = "-" + mx + "px " + " -" + my + "px"
$("#zoombox").css({"background-position":coord})
})
and css
#zoombox{
display:none;
position:absolute;
border:5px solid rgba(248, 243, 243, 0.72);
top:25%;
left:25%;
z-index:5;
height:50px;
width:50px;
border-radius:100px;
pointer-events:none;
transform:scale(2);
}
that mpboxpic is your main picture and zoombox is your html tag as magnifier glass
<div id="zoombox">
</div>
i have used jquery and javascript to create some custom rollover button functionality and i am experiencing an issue where a variable is not be overwritten but added to. The basic function of my code is on mouseover of a link, i simply want the link to slide up and double in height so that the bottom 'on' portion of the graphic is showing (exactly like css sliding doors rollovers).
However the issue i am having is that the doubleHeight variable is cumulative so that every time you roll over the link the double height of the link is not reset each time, it just adds it to the last value. Weirdly this is only happening after a lightbox is triggered on the page, before that the functionality works just fine. Here is my javascript:
var heightVal, doubleHeight;
$('div.flex_rollover_btn p a').bind('mouseover', function() {
heightVal = $(this).css('height');
doubleHeight = heightVal.replace("px", "");
doubleHeight = doubleHeight * 2 + "px";
$(this).css({height: doubleHeight, top: '-' + heightVal});
});
$('div.flex_rollover_btn p a').bind('mouseout', function() {
heightVal = $(this).parent().css('height');
$(this).css({height: heightVal, top: '0'});
});
and here is the HTML code it is acting upon:
<div style="position: absolute; top: 322px; left: 13px; width: 139px; height: 79px; z-index: 3;" class="block item_3 flex_rollover_btn">
<p style="width: 75px; height: 53px;"><a style="width: 75px; height: 53px;" class="new_window" title="Flexible Size Rollover Test 2" href="http://doctype.tv"><img height="106" width="75" alt="Flexible Size Rollover Test 2" src="/cms/arcadiacorp_uk/repository/pages/static/static-0000006614/images/flex_rollover_2.gif"></a></p>
</div>
To see it in action go here scroll to the right and mouse over the red star thing, then open a lightbox (any of the links with the + symbol next to them) close it and mouseover the red star thing again and you will see what i mean.
In your mouseout handler function, you don't actually do anything. You get the heightVal (which was doubled earlier) and assign it back. The simple solution is to devide the value by two before assigning, just like you double it in the mouseover function.
The best way is to do it all with CSS classes. In CSS you specifiy all dimensions like height and then in JavaScript you can simply change the height by adding or removing a class.
Edit: I see in the mouseout handler function you look at the parent. Are you sure the parent isn't resized with the child element?
I know this isn't directly addressing your question, but don't do this:
doubleHeight = heightVal.replace("px", "");
doubleHeight = doubleHeight * 2 + "px";
Instead, do this:
doubleHeight = (2 * parseInt(heightVal, 10)) + px;
Hi im trying to load a div next to an link/button if clicked by unauthenticated users.
i have the following:
$(function () {
$(".unauthenticated").click(function () {
ShowMessage($(this).attr("id"), "#unauthenticated-div")
});
function ShowMessage(clickedItemId, divId) {
clickedItem = $("#" + clickedItemId);
var pos = clickedItem.offset();
var width = clickedItem.width();
$(divId).css({
"left": pos.left + width + 10,
"top": pos.top + 10
}).show();
}
});
<div id="unauthenticated-div" title="Please Login" style="display: none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
</span>You must loginor Registerto do this</p>
</div>
It shown the div, but not next to the clicked link. when i step through the code, pos and width are as expected.
Does the element on which you're setting the position have its position property set to absolute or relative?
If not, try setting it.
$(divId).css({
"left": pos.left + width + 10,
"top": pos.top + 10,
"position":"absolute"
}).show();
Also, your updated question with the HTML doesn't show an element with the class "unauthenticated".
Not sure if that's part of the issue, but the click is being assigned to $(".unauthenticated").
See patrick's answer to set an absolute position. Btw, it could be better to pass your object in the first param.
$(".unauthenticated").click(function () {
ShowMessage($(this), "#unauthenticated-div")
});
and
function ShowMessage(clickedItem, divId) {
var pos = clickedItem.offset();
var width = clickedItem.width();
$(divId).css({
"left": pos.left + width + 10,
"top": pos.top + 10
}).show();
}
"left" and "top" only have meaning if the div is position: relative, and then only relative to the innermost position relative or absolute enclosing div (or the body if none). Check that with Firebug or IE Developer Toolbar...