I have a task to launch 2 pdf's in a single html page and do the pdf's comparsion side by side, so I have create 2 iframes for each comparing, however I have a problem on sync the scroll bar behaviour, like when I move the vertical scroll bar on the left side web page(iframe1), then the scroll bar on right side web page(iframe2) will move as well. Is there anyone know how to do it? or other method beside using iframe, but available to launch 2 web pages and sync the scroll bar? Thanks in advance.
Here is the code im trying
<html>
<head>
<script src="http://code.jquery.com/jquery-1.3.2.js"></script>
<style>
.container {
width: 80%;
height: 200px;
margin: auto;
padding: 10px;
}
.div1 {
width: 15%;
height: 200px;
float: left;
overflow:auto;
border:1px solid black;
}
.div2 {
margin-left: 15%;
width: 15%;
height: 200px;
overflow:auto;
border:1px solid black;
}
</style>
<SCRIPT>
$(document).ready(function()
{
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
$("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
$("#div1").scrollLeft($("#div2").scrollLeft());
});
$($("#iframe1").contents()).scroll(function(){
$($("#iframe2").contents()).scrollTop($(this).scrollTop());
});
});
</SCRIPT>
</head>
<body>
<section class="container">
<div id="div1" class="div1">
<iframe id="iframe1" src="sample.pdf" style="width:600px; height:500px;"></iframe>
</div>
<div id="div2" class="div2">
<iframe id="iframe2" src="sample.pdf" style="width:600px; height:500px;"></iframe>
</div>
</section>
</body>
</html>
Related
I am not good at English, so I ask questions using a translator.
I'm sorry.
I use the ScrollMagic library
Created a Mobile Page.
For ScrollMagic to work
html, body's height should be 100%.
Content Inside has an Iframe.
The Position property of the parent DIV of the Iframe is Fixed.
PC: Put your cursor over the iframe, scroll, scroll, and you won't scroll.
Mobile: Put your cursor on the Iframe and touchMove, you can't scroll.
If I scroll "iFrame,"
I want to scroll ".a, .b" instead.
Below is an example source
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="b">
BOTTOM
</div>
<div class="item">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" scrolling="no"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.a, .b {
width: 100%;
position:relative;
z-index:2;
}
.a {
background-color: red;
height:120%;
}
.b {
background-color: blue;
height:50%;
bottom:0px;
}
.item {
width:100%;
height:100px;
top:20%;
position:fixed;
z-index:3;
}
.item iframe {
width:100%;
height: 100px;
}
jsfiddle.net
Setting the IFRAM's property to "pointer-events: none" will work.
But click should be possible in the IFRAM,
So I'm looking for another way.
If you have any good information, please let me know.
HTML-
<div class="wrap">
<div class="floatleft">
<div class="JShover">
<h3 class="border">Works with your business applications
<p >Connect with Office 365, GSuite.</p></h3>
</div>
<div class="JShover">
<h3 class="border">Works with your business applications
<p>Connect with Office 365, GSuite.</p></h3></div>
</div>
<div class="floatright" >
<img class="integration" src="integrations-image.png" width="100%" height="100px">
</div>
<div style="clear: both;">
</div>
</div>
CSS used for the div-
.border{
border-left:6px solid #3793EE;
text-align: left;
padding-left: 5%;
}
div.JShover{
height:50%;
text-align: left;
opacity:0.5;
}
.wrap {
overflow: hidden;
margin: auto;
max-width: 700px;
}
.floatleft {
float:left;
width: 50%;
height: 500px;
}
.floatright {
float: right;
height: 500px;
width: 50%;
}
When the floatleft divs JShover is clicked the opacity should be 1. Otherwise it should 0.5.
JavaScript used-
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$(".JShover").click(function() {
this.style.opacity = 1
});
</script>
In the result the JShover divs have an opacity of 0.5 (since it is in the CSS) but when I click on it, the opacity does not change to 1. Is there any error in my code or implementation?
You can for example do it like this:
$(".JShover").click(function() {
this.style.opacity = 1
});
Also add opacity: 0.5; to your div.JShover element in css.
Working fiddle here.
Edit:
First, be sure to have jQuery on your site either with having and linking a local copy or linking it inside your <head> like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And second be sure to put your js code for changing opacity below the linked jQuery library, for example below or at the end of the <body> tag.
Here is your html
<div class='floatleft'>
Hello..... :)
</div>
Here is your CSS
.floatleft{
background-color:red;
opacity:0;
}
Here is your JS
$('.floatleft').click(function(){
$(this).css('opacity','1')
});
Hope this helps you
Hello I'm trying to do a notification system on my website so that one can scroll to the right on a div to dismiss it. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.container1 {width: 300px; height: 300px; overflow: auto; }
.container2{width: 2000px; }
</style>
<div class="container1">
<div class="container2">
<div>
<div class="fade">
Scroll down i will become invisible
</div>
</div>
</div>
</div>
<script>
$(window).scroll(function() {
if ($('div.container1').scrollLeft()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
</script>
The only problem is that it doesn't work. Please feel free to ask for clarification in the comments.
I need to position header and footer accordingly to content height.
So the header and footer are adjacent to content, even when the content size change.
I would like to know if a CSS solution exists (even CSS 3), if no a JS solution.
Notes: I cannot change the order of DIV in the HTML.
Below pictures of the desired layout.
In more details:
I need the top side of the content positioned just after the end
bottom side of header.
I need the top side of the footer positioned just after the end
bottom side of content.
If header change height, content should move up/down.
If content change height, footer should move up/down.
Live code: http://jsfiddle.net/wkfcnj6c/
Example is welcome :)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
</script>
<style>
#content-a, #content-b{
position: absolute;
width: 500px;
height: 250px;
}
#content-a {
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
position: absolute;
left: 60px;
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
</body>
</html>
with your html structure this isn't possible with pure css, especially with a dynamic height for the header and footer - as they are in a seperate div, it will be impossible for the content divs to know how much space is left to take up. You would need to use js to either move your divs and calculate the heights, but I would do something along the following:
body, html {
height:100%;
position:relative;
margin:0;
padding:0;
}
#master {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#master > div {
display:table;
width:100%;
height:100%;
}
#master > div > div {
display:table-row;
width:100%;
}
and with the help of jquery, reorder your elements:
$('#master').wrapInner('<div/>');
$('#content-b').insertAfter($('#content-a').insertAfter($('#header')));
Example
Example with expanded content and header
Got it I think: http://jsfiddle.net/Preben/80a6q40x/1/
What I did:
Since all is in correct order except the header, we can do this:
Remove ALL position:absolute;
Put margin-top: 50px on the content-a
Put position:ansolute; top:0px; on the #header
You may also edit the #content-a to have min-height: 250px; to adjust to the content in height: http://jsfiddle.net/Preben/80a6q40x/4/
That's it.
<div id="content-a">content a</div>
<div id="content-b" style="display:none">content a</div>
<div id="master">
<div id="header">header</div>
<div id="footer">footer</div>
</div>
CSS:
#content-a, #content-b{
width: 500px;
height: 250px;
}
#content-a {
margin-top:50px;
background-color: red;
}
#content-b {
background-color: yellow;
}
#master {
z-index: 100;
}
#header, #footer {
width: 500px;
height: 50px;
}
#header {
background-color: gray;
position:absolute;
top:0px;
}
#footer {
background-color: blue;
}
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}