I have a particular problem that I need help with.
I have a div which contains a lot of other divs which I would like to be able to zoom into. for example, a few of the child divs have text and I'd like the user to be able to zoom in to see what they say.
here is an example -- > http://jsfiddle.net/du5ye/3/
I've though that maybe I could use jquery to change the classes of everything inside, but I'd like to not hard code the new sizes, rather every property in the main wrapper div would get larger by a percentage as the user scrolls his mouse wheel. In addition, I'd like the user to be able to scroll around the div by dragging, quite like google maps. Is this kind of thing possible? and how would I go about it?
Here is the entire code for those that would rather avoid jsfiddle;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style>
.layoutGreys {
background-color: #DDD;
border: solid thin #BBB;
padding-left: 10px;
padding-right: 10px;;
float: left;
}
.Group{
background-color: #955;
width: 50px;
height: 35px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}
.Divider{
width: 10px;
height: 35px;
float: left;
<!--border-top: medium solid #999;-->
margin-top: 10px;
}
.wrapper{
width: 560px;
height: 175px;
background-color: #333;
border: thick #888 solid;
}
</style>
<body onload="CreateBox()">
<div id="wrapper" class="wrapper">
<div class="layoutGreys">
<div class="Group"></div>
<!-- Parent -->
<div class="layoutGreys">
<!-- Parent Icon -->
<div class="Group" style="float: none;"></div>
<!-- Children -->
<div class="layoutGreys">
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
<div class="Divider"></div>
<!-- Parent -->
<div class="layoutGreys">
<!-- Parent Icon -->
<div class="Group" style="float: none; "></div>
<!-- Children -->
<div class="layoutGreys">
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
<div class="Divider"></div>
<div class="Group"></div>
</div>
</div>
<div class="Divider"></div>
<div class="Group"></div>
</div>
</div>
<div class="Group"></div>
</div>
</div>
</body>
</html>
Have you tried the css zoom property? or maybe the css-transforms like scale()?
You can make your outer div overflow: scroll; and bind mouse down events to scroll the div for the pan and drag effect.
* I know this question is old, but It may help future visitors.
Try modifying this plugin to your needs - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect
Use zoomooz.js
It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.
Related
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
On clicking or hovering over a div,it should display the another div next to it,like option it must not be vertical like drop down,it must go on horizontally
There are multiple ways to do it, but aligning div horizontally is done using css, it has nothing to do with hover events. Try to understand the below code.
I am showing in 2 ways here
(div1,div2) using css
(div3,div4) using javascript
Link: https://github.com/helloritesh000/how-to-display-another-div-element-next-to-the-first-div-element-horizontally-by
<!doctype html>
<html>
<head>
<style type="text/css">
.div{
width: 200px;
height: 30px;
float: left;
}
.parent1 .div1{
background-color: red;
}
.div2{
background-color: cyan;
display: none;
}
.parent1 .div:hover + div{
display: block;
}
</style>
</head>
<body>
<div class="parent1">
<div class="div div1">
</div>
<div class="div div2">
</div>
</div>
<div style="clear: both;"></div>
<div class="parent2">
<div class="div div3" id="div3" onmouseover="div4.style.visibility='visible'" onmouseout="div4.style.visibility='hidden'" style="background-color: blue;">
</div>
<div class="div div4" id="div4" style="background-color: #ccc;">
</div>
</div>
<script>
div4.style.visibility='hidden'
</script>
</body>
</html>
I am using a connector framework called js-graph-it to connect elements on my web page. When I am running an html file to as a demonstration of working of this project it works fine but when I am including this into the project, connecting lines are missing.
Here is the code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="js-graph-it.css">
<style>
.canvas {
font-family: tahoma;
}
.block {
position: absolute;
border: 1px solid #7DAB76;
background-color: #BAFFB0;
padding: 3px;
}
/*.connector {
background-color: #FF9900;
}*/
.source-label, .middle-label, .destination-label {
padding: 5px;
}
</style>
</head>
<body onload="initPageObjects();">
<div class="canvas"
style="width: 1350px; height: 1250px;">
<h1 class="block" id="h1_block"
style="left: 100px; top:10px;">
h1 block
</h1>
<h2 class="block" id="h2_block"
style="left: 800px; top: 100px;">
h2 block
</h2>
<h3 class="block" id="h3_block"
style="left: 100px; top: 180px;">
h3 block
</h3>
<h2 class="block" id="h4_block"
style="left: 100px; top: 480px;">
h2_new block
</h2>
<!-- <div class="connector h1_block h2_block"></div>
<img src="arrow.gif" class="connector-start">
<img src="arrow.gif" class="connector-end">
<label class="source-label">start</label>
<label class="middle-label">middle</label>
<label class="destination-label">end</label>
</div> -->
<div class="connector h1_block h2_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
<div class="connector h2_block h3_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
<div class="connector h2_block h4_block">
<!-- <img class="connector-end" src="arrow.gif"> -->
</div>
</body>
</html>
and JSFiddle link
I am also attaching the screenshot as a proof that it is working as a standalone file.
Change onDomready to No wrap - in <head> in JSFiddle: http://jsfiddle.net/j6nhc9y1/3/
Basically, with those “wrapped” options the initPageObjects function won’t be on the top level where it needs to be in order to be called from an HTML inline event handler.
A better alternative would be to create dynamic event handlers within the script, e.g.:
window.addEventListener('load',initPageObjects);
I have a page with 4 tiles that display 2 options when a mouse hovers over it: New Form and Form List
However, I want these two options hidden unless the user is currently hovered over the tile. This is working fine but it does it 2 or 3 times after the first hover event. Basically, on page load, the 2 options are hidden and the tiles are displayed. Once I hover into the first tile, the two options then get displayed using the .show() method. If my mouse leaves the tile, the .hide() method is called hiding the two options.
However, if I hover my mouse back into the same tile, it executes both .hide() and .show() 2 times and sometimes even more than that. I'm assuming I'm doing something stupid but can't find any help on the web. JSFiddle can be found here: http://jsfiddle.net/n97M8/
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container
{
height: 150px;
text-align:center;
}
.FormTiles
{
position: relative;
text-align: center;
vertical-align: middle;
float:left;
width: 150px;
height: 0px;
margin-left: auto;
margin-right: auto;
background-color: green;
color: white;
display: inline;
font-family: Verdana;
font-size:small;
margin-right: 5px;
padding-bottom: 150px;
}
#optionsContainer, #optionsContainer1, #optionsContainer2, #optionsContainer3
{
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
background-color: gray;
padding-top: 3px;
padding-bottom: 3px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="FormTiles" id="workForInspector">Work For Inspector Form
<div id="optionsContainer">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form2">Form 2
<div id="optionsContainer1">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form3">Form 3
<div id="optionsContainer2">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form4">Form 4
<div id="optionsContainer3">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#workForInspector").hover(function () {
$("#optionsContainer").show("fast");
});
$("#workForInspector").mouseout(function () {
$("#optionsContainer").hide("fast");
});
});
</script>
</body>
</html>
Use jQuery's .stop() function to stop the queueing of mouse movements:
$("#workForInspector").hover(function () {
$("#optionsContainer").stop().show("fast");
}, function () {
$("#optionsContainer").stop().hide("fast");
});
jsFiddle example
can you please tell me how to add hidden div or button behind the button?Actully I need to increase the click area without increase the x image size so that user can click in whole area.?
here is my code
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
<button id="openPopup">openPOP</button>
<div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a">Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">TestCase Name:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
</div>
Done
</div>
</div>
</body>
</html>
js Code
$(function(){
$('#openPopup').click(function(){
$( "#testCaseId" ).popup( "open" );
})
})
Use the close icon as a centered background image of a larger element.
HTML
CSS
a {
display: block;
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
width: 50px;
height: 50px;
}
Demo: http://jsfiddle.net/eAxb8/
Try setting a <div> that acts as a container for the button graphic and is the same color as your background, but clickable.
For example,
<a href = "whatever.com">
<div id="hidden_button">
<div id="button_graphic">
Button Text
</div>
</div>
</a>
stylesheet.css
a {
text-decoration: none;
}
#hidden_button {
background: #ffffff;
width: 300px;
height: 300px;
}
#button_graphic {
width: 150px;
height: 150px;
border: 4px solid black;
border-radius: 5px;
color: #ffffff;
text-align: center;
background-color: #F38630;
margin: auto;
margin-top: 75px;
}
If I've done my CSS correctly, this should create a square button with rounded edges that is 150px by 150px, with a container around it that is 300px by 300px and appears invisible, but is still clickable. Adjust the sizes to meet your needs.
To me, it seems like you look for an invisible area that acts like a button.
See the following fiddle. To remove the blue color, just delete the code style="background-color:lightblue"
http://jsfiddle.net/p943a/2/