How to place lateral buttons to an iframe (for all browsers)? - javascript

I need to dynamically create iframes and to put some buttons (in column) on right of them, with buttons positions that follow the iframes ones.
I tried all the settings of
button.style.position = " "
inserting "absolute", "relative", etc. and trying to specify the pixel positions, but it doesn't work.
However, I have noticed that opening the same page with different browsers the buttons are placed in different positions.
I need a method that allows me to place the buttons at the right of the iframe, following its position and above all that returns the same result with all most used browsers.
What technique can I use?

Whats wrong with the basic premise of
<div id="left">
<iframe src="http://www.google.com"></iframe>
</div>
<div id="right">
<button>first button</button>
<button>second button</button>
</div>
#left, #right {
float:left;
width:46%;
height:300px;
margin:2%;
}
iframe {
width:100%;
}
button {
width:100%;
clear:right;
}
working example

Related

How to fill vertical and scroll middle pane in HTML/CSS (Chrome works but not Firefox)

I'm trying to have a basic HTML page, split three way, top and bottom panes should have a fixed fix, or autosize, and middle should fill the remaining.
I got it working once using position:fixed, but that is very ugly and doesn't work once things get more dynamic.
I finally got this to work on Chrome using tables and making the height:100% in the middle tr. I celebrated, then tried Firefox, and it does not work.
Here is the fiddle,
https://jsfiddle.net/b1uxcupv/6/
HTML is basically,
<html style="height:100%;width:100%;max-height:100%">
<body style="height:100%;width:100%;">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div style="overflow:auto;height:100%">
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
</body>
<html>
I have basically two versions of this, one the page should fill the browse window with the middle pane taking all the extra room and scrolling if required.
The second is basically the same but the whole thing is in a fixed sized div inside a page. Both work on Chrome, but Firefox does not give the scrollbar in the middle pane, it just ignores the max-size and keeps filling the page.
Here's probably the easiest, modern way of handling it.
HTML
<div class="container">
<div class="head"></div>
<div class="mid"></div>
<div class="foot"></div>
</div>
CSS
.container {
display:flex;
flex-direction:column;
height:100vh;
width:100%;
}
.head {
background:blue;
min-height:100px;
}
.mid {
background:#eee;
overflow:auto;
flex-grow:1;
}
.foot {
background:green;
min-height:100px;
}
Okay I found a solutions... but is requires JavaScript, which I am finding required to layout things correctly in a web app, CSS really needs to support dynamic web app layouts better.
Here it is,
https://jsfiddle.net/b1uxcupv/15/
<html style="width:100%;height:100%;">
<body style="height:100%;width:100%;padding:0;margin:0">
<table style="height:100%;width:100%;">
<tr><td style="height:50px;width:100%;background-color:blue"></td></tr>
<tr><td style="height:100%;width:100%;background-color:grey">
<div id="scroller" style="max-height:100px;overflow:auto;height:100%">
xxblah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
</div>
</td></tr>
<tr><td style="height:50px;width:100%;background-color:green"></td></tr>
</table>
<script>
var scroller = document.getElementById('scroller');
console.log(scroller);
console.log(scroller.parentNode);
console.log(scroller.parentNode.offsetHeight);
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
var reset = true;
window.onresize = function() {
console.log(scroller.parentNode.offsetHeight - 4);
scroller.style.maxHeight = "100px";
if (reset) {
reset = false;
setTimeout(function() {
reset = true;
scroller.style.maxHeight = scroller.parentNode.offsetHeight + "px";
}, 100);
}
};
</script>
</body>
Basically I set a max-height on the middle scroller to something smallish (100px) then is JavaScript resize the maxHeight to the parent's offestHeight, and register for resize events.
Perhaps not pretty, but it works Chrome, Firefox, IE, and Safari.
I still think there must be a css solution that does not require JavaScript or position:fixed, and works on more than just Chrome. Anybody got an idea?
Thanks for the users who submitted answers, they were good attempts, but did not fill the window, or used static fixed positions.
Based on this SO and this SO, it seems like <td> does not support the overflow attribute. Placing a <div> within the <td>, and also setting a fixed height for the <td> but a height:100% for the <div> got it working for me. Any tag with an overflow attribute should either have a fixed height or be nested within another tag with a fixed height.
Here is my fiddle that works in Chrome and Firefox: https://jsfiddle.net/rgutierrez1014/b1uxcupv/13/

how to divide a web page using divisions and how to give links between those parts of pages

I have a html page, having two div's.Left div contains all contents(INDEX of pages) with hyper-links.Now i want to display the content in the right div, that the user has clicked.In right div i have divided the page horizontally into 3 parts..10%,80%,10%.In that 80% horizontal div it shd display the content.I tried by using the target attribute in anchor tag, but it is not showing in that right div.How to solve this?
You can Try This:
css:
div {
width:90%;
height:800px;
position:relative;
background-color:blue;
}
a {
color:white;
font-size:24px;
}
html:
<div id="one">Top of Page</div>
<div id="two">Go to Top</div>
<div id="three">Go to Two</div>
You can try using Iframes. Can refer this site to get started: http://www.dtp-aus.com/frm_sets/frames.html

load data of hover image

First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>

Scrolling the page causes issues to buttons

I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.

Multiple buttons in the header

I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}

Categories

Resources