HTML iframe - disable scroll in the first frame? - javascript

Currently I am using iframes to create tabular navigation for one module.
On module main page I have two tabs, inside one of those frames I have another two tabs after a single selection box. The content inside frames for 3rd and 4th tab will contain most of the content, that will get the frame to overflow. So.. what I want is to start the scroll bar not from 1st/2nd tab (or not first frames created) but from 3rd and 4th tab instead.
1st Tab| 2nd Tab
(SelectBox)
3rdTab | 4th Tab
(The rest of content)
Below is some code example (first frame):
<table>
<tr>
// create tab with td
</tr>
<tr>
// create tab with td
</tr>
</table>
<div id="newstabs" class="bg2" style="border-left:0px; border-right:0px; border-bottom:0px;">
<iframe src ="Download.asp" width="158" height="274" id="download3" frameborder="0"></iframe>
</div>
<div id="newstabs0" style="position:absolute; top:0; left:0; visibility: hidden; margin: 10px;">
<iframe src ="Download.asp" width="158" height="274" id="download2" frameborder="0"></iframe>
</div>
<div id="newstabs1" style="position:absolute; top:0; left:0; visibility: hidden; margin: 10px;">
<iframe src ="Upload.asp" width="158" height="274" id="upload" frameborder="0"></iframe>
</div>
The Download.asp has similar iframe setup, which is where I want the scrolling to work, not from the main page.
How can I do this? Setting scrolling="no" in the main page's iframs disables scrolling on Download.asp page as well.

Related

Unable to navigate sidebar content when I use iframes for each one of them

So I have my page with a top nav bar, a side bar and content at right. Now I have my pages designed, but i felt it to be repetitive, so I was trying to work out with iframes in the right side(the one that changes when any link in the sidebar is changed). I hope you get the idea.
Now, the issue is that I am able to navigate to second iframe tag from 1st but not from second to first iframe.
Here's the code.
HTML:
<div class="container-fluid side-content">
<iframe src="carsx-iframe.html" id="car-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>
<iframe src="edit-profile-iframe.html" id="edit-prof" height="1050px" width="100%" style="outline: none; border-style: none;"></iframe>
</div>
Js:
$(document).ready(function() {
$("#edit-prof-click").click(function() {
$("#edit-prof").show();
});
});
$(document).ready(function() {
$("#cars").click(function() {
$("#car-frame").show();
});
});
CSS
#edit-prof{
display: none;
}
#car-frame{
display: none;
}
You need to hide the second div to show the first one and you arent doing that when trying to show the first.
Try adding something like
$("#car-frame").hide();
Before showing the first iframe.

Iframe - from div to div

Here is how i call the content from the iframe:
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="InnerIframe" class="FrameCSS" scrolling="no"></iframe>
Here is the CSS of the iframe:
.FrameCSS
{
position:absolute;
top:-350px;
left:-20px;
width:400px;
height:700px;
border:1px solid #ccc;
}
As you can see i use top:-350px to point from where i want the iframe to start showing content from page: http://beta.sportsdirect.bg/checkout/onepage/
I want to ask is there any way with jQuery or some other method that i can start the iframe showing content from <div id="StartIframe"></div> and and the iframe grabbing content at <div id="EndIframe"></div> ?
Basicly, am i able to make the an iframe get content from a page starting from specific div and ending with a specific div ?

Hide facebook like box IFRAME component

Is it possible to hide the text "Facebook social module" in Facebook IFRAME like box ?
Ps: The text div belong to a class "clearfix pvs phm" so here is what I tried in my CSS:
.clearfix.pvs.phm{visibility:hidden;}
<!-- HTML -->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=180&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:258px;" allowTransparency="true"></iframe>
Sure. First of all, find it's div, table etc. via DOM. Second, add css it's div id (for example face-social), class etc. to these lines;
#face-social{
display: none;
}
if you don't like that solution. You must try iframe. That's why you have to use again CSS and iframe width, height values.
Edit: Change it to;
.clearfix.pvs.phm
{display:none
}

Positioning div absolute inside td does not work in firefox

I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.
Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.
I am appending this div inside hovered td.
<tr>
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
<br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv" style="position: absolute;">
This will show options replace/split/add new
</div>
</td>
</tr>
The problem is position absolute for this div doesnt work in firefox.
And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here. The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.
Link To Fiddle
works perfectly in Chrome though. Any other solution guys??
Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.
Design div as table is best approach. This may be used for responsive design too.
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br> <br> <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv"> </div>
</td>
you've given absolute position to <div class="contentdiv"> </div>
Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div>.
I've checked. It's working perfectly.
http://jsfiddle.net/qfquj/69/
The following are I modified.
removed absolute position for
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
top:0;
opacity:.6
}
and added inline css for h1
<h1 style="position:absolute;">
Here is answer for your question. I hope this may help you.
http://jsfiddle.net/qfquj/73/
What I modified is,
Removed top:0 and added float:left
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
position:absolute;
opacity:0.6;
float:left;
}
Added inline css float left for <h1>
<h1 style="float:left">
Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.
It's a 13 year old Gecko bug.
You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.

Menu in header reloads everytime a user clicks on the links. How to change the color of the current link?

I have a header.jsp which is included in all pages of my application. The header also contains the navigation menu with 4 page links. When a user will click one of these links to go to the respective page, the whole page reloads. How can i change the color of the link for the current page in the header. below is the header.
<td class="navBtn" onClick="className='navBtnSel';">Customer</td>
<td class="navBtn" onClick="className='navBtnSel';">Branch</td>
<td class="navBtn" onClick="className='navBtnSel';">Reports</td>
<td class="navBtn" onClick="className='navBtnSel';">Create User</td>
<td class="navBtn" onClick="className='navBtnSel';"><div style="padding-right: 14px;">Log Out</div></td>
and this header is included in other pages as below..
<tr>
<td colspan="2" align="left"><iframe src ="Header.jsp?stflg=C" name="head" scrolling="no" frameborder="0" id="head" style="height: 150px; width: 100%;"></iframe></td>
</tr>
<tr>
<td id="searchCell" width="21%" align="left"><iframe style="height: 590px; margin-left: 10px; margin-right: 0px; width: 250px;" frameborder="0" id="search" name="search" src ="SearchFill.do" scrolling="no"></iframe></td>
<td id="bodyCell"width="79%"><iframe style="height: 590px; border-collapse: collapse; width: 100%;" frameborder="0" id="body" name="body" scrolling="auto" src="body.jsp"></iframe></td>
</tr>
I am a beginner in front end. please help.
You can add something like menu_id into each menu-link. Example:
<a href="BranchTemplate.jsp?menu_id=2" ... </a>
The menu_id variable will serve to identify active menu.
You first need a method of reliably identifying the current page. I've found it effective to add a unique ID to each body tag, and an ID to each link, resulting in something like this:
<body id="about">
....
<nav>
<a class="n-main" href="main.html">
<a class="n-about" href="about.html">
</nav>
Then you can re-style current links with a specification like this:
body#main a.n-main, body#about a.n-about { color: red; }
Only the link which is inside the body#about will turn red.
Using backend code, you could also add a .current class to the appropriate link, and then just write a style specification for that.
You need to investigate some server-side technologies to handle the 'include' you are trying to do with the iframe. (Like PHP, ASP.NET, etc.)
With your iframe approach, you are going to make navigating between pages far more complicated than it needs to be.

Categories