Is there any trick to displaying url on bottom left of page by Javascript ?
Example my link element is :
<div data-link="http://stackoverflow.com"></div>
JS :
$(document).on('click','[data-link]',function(){
var url = $(this).attr('data-link');
window.open(url,'_blank');
}).on('mouseover','[data-link]',function(){
var a = document.createElement('a');
a.href = $(this).attr('data-link');
$(a).trigger('mouseover');
// Nothing showing
});
Possible ? Any trick ?
As far as I know this is not possible with Javascript, this is a browser-specific function that only triggers when your mouse hovers over a link. If you trigger the .hover() with JS, it "only" applies the CSS-Rules and fires the JS-Functions.
You could create an absolute positioned div with the link-tag and show this when you hover over an element, but it could cause problems when you hover over an actual A-Tag, then your div will get hidden under the browser-field.
Is this what you are looking for?
$('a').mouseover(function() {
var url = $(this).attr('href');
var style = "position: fixed; left: 0; bottom: 0; z-index: 1000000;";
$('body').append("<b id='urlDisplay' style='" + style + "'>" + url + "</b>");
});
$('a').mouseout(function() { $('#urlDisplay').remove(); });
Make it prettier by putting the css elsewhere!
Related
On a webpage, I have an image. When I mouseover it, a hidden div pops up at cursor location with information on that image. Clicking on that image, creates another one in another div. The new image also share the same div pop up when mouseover.
For the original image I use jquery.
$("#" + abys).on("mouseover", function(e){
$("#" + abys + "_tooltip").css({
left: e.pageX,
top: e.pageY
}).show();
});
$("#" + abys).on("mouseout", function(e){
$("#" + abys + "_tooltip").hide();
});
For the new image when clicked, I use pure javascript.
var itemDiv = document.getElementById("items_div");
var newImg = document.createElement("img");
newImg.src = "/items_img/" + abys + ".png";
newImg.id = abys + "_slot";
itemDiv.appendChild(newImg);
appendNum++;
console.log(appendNum);
newImg.onclick = function(){
newImg.parentNode.removeChild(newImg);
appendNum--;
console.log(appendNum);
}
newImg.onmouseover = function(e){
abysTooltip.style.display = "block";
abysTooltip.style.top = e.pageX;
abysTooltip.style.left = e.pageY;
}
CSS for the popup div.
.item_tooltip_div {
border:1px solid;
padding:20px;
width:400px;
display:none;
position:absolute;
z-index:10;
background-color:rgb(0,0,0);
pointer-events:none;
}
The issue I am running into is that when I mouseover the new image, the tooltip shows up at the original image location, and not my mouse cursor position.
Solved it by using jquery for both instances.
For some reason, jquery .css() was blocking javascript's .style. When hovering over the original image, the tooltip's top and left position is already set. When hovering over the new image, the top and left position did not change.
I'm changing background of a div when the user scrolls to the end of that div. Since its a fixed background, I am not using HTML <img> tag, instead I am using the CSS background-image:. With the following JavaScript function, it successfully changes the background when i need it, and reverts back when user scrolls back to top.
function transimg(divid,imgurl1,imgurl2) {
$(window).scroll(function(){
var st = $(this).scrollTop();
var dist = $(divid).offset().top - 50;
if(st > dist) {
$(divid).css("background-image", "url(" + imgurl1 +")");
}
else{
$(divid).css("background-image", "url(" + imgurl2 +")");
}
});
}
My Question is:
Obviously this loads the image when user scrolls to that offset. Which makes it slow when i host the site and a user has slow connection. So i need the 2nd image to be loaded when the page starts loading. Kind of the opposite of Lazy Load. How can i achieve this ?
I really don't want to use any plugins.
Any help is appreciated, thanks in advance !
You can load them in the before body is load. (Add the script at the end of your body).
Explanation: When you create an Image and set is the src property the image file download to your browser.
var images = ['img1', 'img2'];
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i];
}
you could add 2 background-images to the divid and so they are both loaded at page refresh and then with your JQ toggle between background-images depending on scroll.
see snippet below. let me know if it helps ( i check in Network and both images are loaded when page refresh )
$(window).scroll(function(){
var st = $(this).scrollTop();
var dist = $("#container").offset().top - 50;
if(st > dist) {
$("#container").css("background-image", "url(" + "http://i.imgur.com/AsqlqnG.jpg" +")");
}
else{
$("#container").css("background-image", "url(" + "http://i.imgur.com/I8170KA.jpg" +")");
}
});
#container {
background-image : url("http://i.imgur.com/I8170KA.jpg"),url("http://i.imgur.com/AsqlqnG.jpg");
background-size:contain;
background-repeat:no-repeat;
height:800px;
width:100%;
margin-top:50px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
</div>
Here is a link to a JSFiddle http://jsfiddle.net/9NYcn/11/ i put together with what i would like to do, but i need to do this with pure css.
function expand(){
var sect = document.getElementById("sect");
var body = document.getElementById("main");
var panes = document.getElementById("panes");
var newHeight = 40 + "px";
var newHeight2 = 120 + "px";
var topVal = 120 + "px";
sect.style.display = "block";
sect.style.height = newHeight;
body.style.height = newHeight2;
panes.style.top = topVal;
}
In the above function i had to set the "top" property of panes in order to get this to work. i need to get it so that the panes section will work like it currently does without using javascript to change the "top" property of "panes". When the user clicks the "expand" button the div with the class "body" will expand and not stick behind or overlap the "panes" div.
I know im doing a terrible job explaining i apologize for that.
Remove the absolute positioning of .panes: http://jsfiddle.net/rHTM8/
It will make it naturally flow after the middle div.
So I have a modal window that is causing the page to scroll down. It adds #login-box to the url but that div id is not a set place. I thought about adding a div to the html but that wouldn't work because my menu is sticky and it would cause them to scroll to wherever that div is.
http://onecraftyshop.com and click "login" in the nav menu. You will see what I'm talking about. Then scroll down and click it again and oyu will see that it scrolls down no matter where you are on the page.
Here is the relevant JS of the modal window:
// Load the modal window
$('a.login-window').click(function() {
// Get the value in the href of our button.
var login_id = $(this).attr('href');
// Add our overlay to the body and fade it in.
$('body').append('<div id="overlay"></div>');
$('#overlay').fadeIn(300);
// Fade in the modal window.
$(login_id).fadeIn(300);
// center our modal window with the browsers.
var margin_left = ($(login_id).width() + 24) / 2;
var margin_top = ($(login_id).height() + 24) / 2;
$(login_id).css({
'margin-left' : -margin_left,
'margin-top' : -margin_top
});
return false;
});
I tried changing
var margin_top = ($(login_id).height() + 24) / 2; to
var margin_top = ($(login_id).height() + 24) / .7; and that stopped the scrolling but the box wasn't centered (it was actually cut off at the top of the page) I then thought "oh easy just change the positioning with css", but then that caused it to start scrolling again!
Visit http://onecraftyshop.com and click "login" in the nav menu. The modal window should pop up and the page will scroll. CSS through firebug or dev tool in chrome.
Let me know if you need anything else.
Thanks for helping me sort this one out!
------------CSS for #overlay as requested--------------------------
background: none repeat scroll 0 0 #000000;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;
To stop scrolling on the page, create this javascript function (written in plain javascript):
scrollingToggleIterates = 0;
function toggleScrolling(event){
if(scrollingToggleIterates%2 == 0){
var scrollPosition = document.documentElement.scrollTop;
document.body.className = 'stopScrolling';
document.documentElement.scrollTop = scrollPosition;
}
else{
var scrollPosition = document.documentElement.scrollTop;
document.body.className = '';
document.documentElement.scrollTop = scrollPosition;
}
scrollingToggleIterates++;
}
Then add this class to your css:
.stopScrolling{
height: 100%;
overflow:hidden;
}
Call the toggleScrolling function when you want to prevent scrolling, then call the function again when you want to restart it. I know you're working in JQuery, but you should be able to intermix it with plain JS.
The plugin that scrolls the window down on fragment links is causing this. If you unhide the login menu you can see the window is scrolling down to it's original location. Since this isn't the default browser behavior, return false or event.preventDefault() will not stop this behavior. You will need to see if there's a class you can add to this link that will stop the plugin from scrolling when this link is clicked.
Another option is to not use the href property for the id of the login window. Make it either href="javascript:void(0)" or just href="#". Then use a data attribute like: data-target="loginMenu" and update your javascript to grab the id from this attribute:
var login_id = $(this).attr('data-target');
I'm working on a pricing comparison table, and wanted to display more information on each option in a different way.
When a user hovers their mouse over a row, I want the row to show more information on that feature. I now have this working using jQuery and a div.
$(document).ready(function() {
$('#row').mouseover(function() {
var $divOverlay = $('#divOverlay');
var bottomWidth = $(this).css('width');
var bottomHeight = $(this).css('height');
var rowPos = $(this).position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;
$divOverlay.css({
position: 'absolute',
top: bottomTop,
left: bottomLeft,
width: bottomWidth,
height: bottomHeight
});
$divOverlay.text($(this).closest('tr').attr('desc'));
$divOverlay.delay('100').fadeIn();
$(this).closest('tr').css({ opacity: 0.01 });
});
$('#divOverlay').mouseleave(function() {
var $divOverlay = $('#divOverlay');
$('#row').css({ opacity: 1 });
$divOverlay.fadeOut();
});
});
My problem now lies in that in some cases I want to include a link to a video, or another page (that opens in a new tab) - to provide the user with more information if needed. But the way I have this working, the link isn't rendered as html but shown as text instead. Would anyone know how else I could do this?
Full functional example:
http://jsfiddle.net/rMXAp/1/
Another idea I had was setting an onclick for the div, where the href is taken from the "desc_link" attribute (see non-header row in jsfiddle example), but I'm not sure yet on how I can set this with jQuery.
I think it was somthing similar to the following that I tried:
$divOverlay.setAttribute('onclick',$(this).closest('tr').attr('desc_link'));
Suggestions are appreciated!
Try using .html instead of .text - should do the trick :)