I have a website and I would like it to do this: When I click on an image on the left side of the page, the page moves backward and when I click on an image on the right side, the page moves forward. I got everything set up correctly so I tried doing this simply with css, onmouseover move the margin of the page so many pixels to the right or left:
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
</div></p>
But that doesn't give me any result. So I tried using an example from w3Schools for javascript onmouseclick:
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</div></p>
I tried just putting the button on the image for the sake of testing it out. The button was there but it didn't scroll when i clicked it. What did I do wrong? It seems like the first approach I took should have definitely worked.
Thanks
Your first snippet won't work anyway, because it's not dynamic. Additionaly, text-indent isn't the best way of handling offsets for block elements. The second one can't work, because the JavaScript won't scroll, but output 'Hello, World' to the <p id="demo" ...> element.
Better have a look here:
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
That's a nice way of vertical scrolling with the use of HTML ankers, that will even work with browsers that don't support or allow JavaScript.
May that help you?
Related
)
Seems i want to invent a wheel, sorry if so.
I have an image of a device and want to make it animated(not the proper word probably).
I mean i want to make buttons clickable as a menu parts. Imagine its a remote for TV or vynil player (if to click play button vynil start spinning), but i can't draw it - only the hq photo - top view. Some of the elements will rotate and spin on mouseevents. Ok, sorry for a lot of extra info, but maybe i am totally wrong in efforts.
I attach a basic fiddle.
<div id="wrapper" class="wrapper">
<img id="img1" src="https://i.ibb.co/FxF2Qhf/main.png" alt="main">
<div id="wrapper2" class="wrapper2">
<img id="img2" src="https://i.ibb.co/Hqbrv67/circle.png" alt="circle">
</div>
<div id="wrapper3" class="wrapper3">
<img id="img3" src="https://i.ibb.co/0FJj7Ys/rect.png" alt="rect">
</div>
</div>
In other words i want to cut elements in photoshop and then make a responsive "puzzle" in html. A circle and rect should scale with main backgraound and stay always at their native places and should be functional elements with clicking events, rotating, etc.
I suppose that widths and heights, positioning should be calculated via js? But circles...
Sorry again if it is too basic and simple.
Looking forward to pointing me the right way)
I tried canvas (low experience), map/areas don't suit cause of animations and transitions need
You should set relative image size if you want them to scale proportionally with container. Set widths in relative percentage of parent container.
.wrapper {
position: relative;
width: 100%;
max-width: max-content;
}
#img1 {
width: 100%;
}
#img2 {
position: absolute;
top: 28%;
left: 35%;
width: 28%;
}
#img3 {
position: absolute;
bottom: 6%;
left: 5%;
width: 32%;
}
<div id="wrapper" class="wrapper">
<img id="img1" src="https://i.ibb.co/FxF2Qhf/main.png" alt="main">
<img id="img2" src="https://i.ibb.co/Hqbrv67/circle.png" alt="circle">
<img id="img3" src="https://i.ibb.co/0FJj7Ys/rect.png" alt="rect">
</div>
I'm new here and I hope this is the appropriate place to ask this. I know very little about javascript or other programming languages so you might need to go easy on me.
Is there any possible way to keep a mouseover tooltip on screen even after I moved my mouse away on a public site that isn't mine? I'm trying to figure this out on a chatting site where you can post comments and see who liked each comment but you have to hover over it with a mouse to see a tooltip popup that shows the usernames of who liked the comment. I would link you the site but it requires you to make an account so instead I can link you guys the source code in case it is necessary. The only thing I was able to do was inspect element/debugger and look at some of the javascript/jquery code the site uses and that's about it lol.
So is there a way I can tamper around with the javascript? Of course I only want this to be temporarily and on just one page. My goal is to copy and paste all the text from the page including the ones in the tooltips. Maybe there is a way to show all the tooltip popups as text on the page? I'd appreciate some help. Sorry if I sound totally clueless!
Here is the part of the code that involves the tooltip:
<div class="si-ch-like-box">
<div class="si-ch-like wttip pointer" data-name="Like" data-loaded="0" data-active="0" style="position: relative;">
<div class="ttip-wrap tw6684925 borRad none" data-class-id="6684925" style="display: none; width: 28px; bottom: 34px; left: -15px; visibility: visible;">
<div class="ttip-text">Like</div>
<div class="ttip-arr" style="left: 16px;"></div><div class="ttip-arr-fix" style="left: 16px;"></div></div></div>
<div class="like-popup-box posRel pointer" onmouseover="initLikeBox(this,'#wall_44715839',8,44715839)" onclick="loadLikersGlobal(this,'#wall_44715839',8,44715839)">
<div class="si-ch-like-nbr bold ">1</div>
<div class="borRad posAbs like-boxes none" style="left: -53px; top: -40px; display: none;">
<div class="like-people-block borRad"><img src="images/loading-1.gif" width="15" border="0"></div>
<div class="like-people-tooltip"> </div></div></div>
In my page i cant fix white block in bottom, in footer page.
Image
Link Page: http://rewardapp.online/index.html
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 3994px;"></div>
Delete the above line of code above in the two locations it is written in at the footer of your HTML Document.
The DIV does not have a name, thus cannot be referred to by JavaScript
There is nothing contained inside the DIV element, so it appears to simply be acting as a spacer
the z-index indicates that its to sit at the very background of the elements on the webpage, which tells me that its set to simply be a way to define the page height given it has a height setting of 3994 pixels
It may have been placed in there whilst initially designing your page because other than stretching out the height of the page, it is literally doing nothing.
To find the above line of code
It appears (on output) to be located here (notice there are 2 lines of the same entered)
<script src="js/scripts.js"></script>
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 3994px;"></div>
<div style="clear: both;"></div>
<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 3994px;"></div>
<div style="clear: both;"></div>
</body>
<!-- <body> -->
Your issue is caused by the last two div elements on the page. They both have incorrect stylings for the height for what you are trying to achieve. To correct the issue change the height defined within the style attribute of both of these elements to something that suits you. In this case changing them both to 3800px will solve your problem and remove the white space at the bottom of the page.
In attribute to that, neither have any way to reference them which would lead me to believe that they are in fact added to create white space.
You can either resize them or both can be removed from the DOM to remove the whitespace.
quick question from a complete JS noobie.
On a site, I have an image of a product consisting of basically two parts, then I have a row of small .png thumbnails .colorthumbnail of those separate parts with transparent backgrounds. In the CSS I set it so that when hovering the thumbnails, it enables the .colorzoom class that overlays a big version of the same color option over the original product picture using position: absolute.
HTML:
<div class="coloroptions">
<div class="j210desertsand">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210desertsand.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210desertsand.png">
</span></div></div>
<div class="j210platinum">
<div class="colorthumbnail">
<a href="javascript:void(0)" id="colorpicker">
<img src="img/products/colors/j210platinum.png"></a>
<span class="colorzoom"><img src="img/products/colors/j210platinum.png">
</span></div></div>
</div>
The <div class="j210desertsand">classes are simply there so I can easily hide a single color option using CSS and the next colour will line up. The anchor points are there cause after some research I found I should actually make the thumbnails clickable and with a href="javascript:void(0)" they don't actually link anywhere or reload the page.
CSS: (Excuse the mess, I'm inexperienced)
.coloroptions {
width: 60%;
margin-left: 40%;
}
.colorthumbnail {
margin-left: -45%;
}
.colorthumbnail img {
float: left;
max-width: 16%;
padding-right: 5px;
position: relative;
}
.colorthumbnail .colorzoom {
position: absolute;
width: 253%;
margin-top: 6.9%;
display: none;
margin-left: -3.6%;
}
.colorthumbnail:hover .colorzoom {
display: block;
}
Now this appears to work fine, but because there are two different parts I want to give the user the ability to combine color options and obviously you can't hover over two images at once. After some more research I found that I need Javascript to force the :hover state on click. But I'm gonna be honest, I have no idea what I'm doing. This is what I have:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!-- -----------------------JSQuery------------------------- -->
<script>
$("#colorpicker").click(function() {
$('.colorthumbnail:hover').toggleClass('colorthumbnail:hover .colorzoom');
});
</script>
<!------------------------ JSQuery End -------------------------->
However this does not appear to be working. Did I get the linked script in the <head> right? It did work alright with the 'Hello World' pop-up test. Did I get the classes in the script right? I'm a little stuck and help would be appreciated! Much love for the community.
Try adding your code like this:
$( document ).ready(function() {
$("#colorpicker").click(function() {
$('.colorthumbnail:hover')
.toggleClass('colorthumbnail:hover.colorzoom');
});
});
When trying to use jquery you need to make sure the page is loaded so it can perform dom manipulation.
source: https://api.jquery.com/ready/
Here is a jsFiddle demo: https://jsfiddle.net/Lv571n1w/
If you inspect element you can see it toggle the classes when clicked.
The repro code is attached. It (basically) contains two div elements: red (fixed) and black (with text). When clicking on the black div, it is up-scaled and the text on it stays sharp. However, in 4 seconds the z-index of the black div changes and the black div becomes to be over the red div. Boom! Here the text becomes blurry (which is a big problem).
The "effect" is especially visible on iPhone 3GS, less noticeable on iPhone 4.
The question is: is there a solution/workaround to tweak every code, but not the red div code, so that the text on the black div will remain sharp?
I am here for any questions / clarification requests.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#main_div").bind("click", function() {
$("#wrapper").css({"z-index": -1});
$("#main_div").css({"-webkit-transform": "scale(1.4)"});
setTimeout(function() {
$("#wrapper").css({"z-index": 2});
}, 4000);
return true;
});
});
</script>
<title>Title</title>
</head>
<body>
<div id="wrapper" style="position: absolute; z-index: 2; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position: absolute; width: 972px; height: 598px; ">
<div id="main_div" style="position: relative; height: 375px; width: 610px; background-color:rgb(2,2,2); -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px;">
<div style="position: relative; padding-top: 26px; padding-right: 10px; padding-bottom: 26px; padding-left: 10px; font-size: 10px; ">
<div style="display: inline; font: normal normal normal 14px/normal arial; color: rgb(150, 150, 150); ">
<span>Here is some TEXT</span>
</div>
</div>
</div>
</div>
</div>
<div style="position: fixed; visibility: visible; height: 598px; top: 150px; width: 972px; left: 20px;">
<div style="position:fixed; bottom:0; right:0; width:70%; height:30%; background-color: red;"></div>
</div>
</body></html>
I was having similar issues with fixed-position elements dipping behind relative-positioned elements when zooming on the relative-positioned content. I was determined to figure out a solution.
When I changed the relative-positioned element back to static, all was well, but then that element was being covered by the fixed position elements. This was the reason I changed that element to relative to begin with... so I could put a z-index on it.
I also tried dynamically assigning the CSS styles of position and z-index, but that didn't seem to change anything either.
Then, I removed the 'left' CSS style from the stylesheet, and I dynamically assigned a style of 'right' via JS, with a value equal to the width of the window, minus the width of that fixed-position element, and this seemed to improve the issue, but not 100%.
Then I found your thread here, and tried your code. I uploaded an HTML file with your code to my server, then loaded that page up in my iPhone, and tried zooming around. I saw no such issues with your text being blurred. Odd enough.
So then I went back to my other page, refreshed, and all was well, even with the fixed-position elements dipping behind the relative-positioned element.
Thus, it seems this is a bug, perhaps caused by low memory or something. I'm not 100% sure, but without being able to reproduce the issue so easily, it may be hard to report such a bug to Apple's iPhone/Safari Mobile development team. :\