My site is affiliated in another site iframe.
The hosted site got the iframe on fix height inside a span with a scroll (don’t ask why).
I’m looking for a way to change the span scroll (with JS) from within the iframe (where my site is).
I know it can be done because I use JqueryUI dialog with position:top (inside the iframe)
which scrolls the span to the top (outside the iframe)
Html:
<body style="overflow:hidden;">
<span style="float: left; height:488px; overflow-y:auto;">
<table>
<tr>
<td>
<iframe id="Iframe" name="Iframe" src="Login.aspx"
width="775px" height="4000px"></iframe>
</td>
<td style="width: 200px; height: 600px; font-size: 25px; border: 1px solid #000000;" valign="top">Side Bar</td>
</tr>
</table>
</span>
window.parent.$("span").whateverYouWantToDo();
works only if iframe content is in the same domain as main window.
When there is a different domain You can only catch the load event from the main window. Try reacting on that.
And see what You can do with
document.location.hash
it might be accessible from the main window, but it's not cross browser
Related
I'm not a programmer, I've created a web site using a major hosting service's application. I want to insert code into a box provided by the hosting service that allows you to paste any HTML code.
I want to create a link on the site that opens a popup window to display text that I hard-code into the code. I don't want to jump to another HTML page.
I found the following code below that allows me to jump to another HTML page (it was set to CNN.com as an example). Is there a way to replace the action of jumping to another HTML page, with opening the popup and displaying the following example text "hello world". (please note in the code below, I deleted the opening and closing "a" tags at the beginning and end of the code since their inclusion causes problems when I type this question out on this web site).
Pop-up Window
Thanks
Easy to make popup window without Jquery. Just copy this code and paste. and clicl the open text. Popup shown.
<p>To display the box, click on the link <a href="#" onClick="document.getElementById('shadowing').style.display='block';
document.getElementById('box').style.display='block';">open</a>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxclose" onClick="document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none'">close </span>
<div id="boxcontent">
And this is the static content of the box. <br><br>
Dynamic content in the next demo...
</div>
</div>
<style type="text/css">
#shadowing{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: #CCA; z-index:10; opacity:0.5; filter: alpha(opacity=50);}
#box {display: none;position: fixed;top: 20%;left: 20%;width: 60%;height: 60%;max-height:400px;padding: 0; margin:0;border: 1px solid black;background-color: white;z-index:11; overflow: hidden;}
#boxclose{float:right;position:absolute; top: 0; right: 0px; background-image:url(images/close.gif);background-repeat:no-repeat; background-color:#CCC; border:1px solid black; width:20px;height:20px;margin-right:0px;}
#boxcontent{position:absolute;top:23px;left:0;right:0;bottom:0;margin:0 0 0 0;padding: 8px;overflow: auto;width:100%;height:100%; overflow:hidden;}
</style>
You can place the function in the <head> section OR you can pull the function from a .js file. This will open a window and load the url you want. It won't redirect the original page as you use the # instead of the actual url.
<script>
function popup(){
window.open('http://www.cnn.com','1426494439650','width=440,height=300,toolbar=0,menubar=0,location=1,status=1,scrollbars=1,resizable=1,left=0,top=0')
}
</script>
link
I have the same problem that is stated in below link, but i am looking for a way to access those elements (using jquery) that are not present in page source but are visible in developer tools. Please suggest some ideas.
Why do some elements in Chrome Developer Tools 'elements' tab not appear in 'view page source?'
Here is the actual problem -
I have hosted "Powerpivot chart" in sharepoint "Excel web part".Whenever user clicks on the chart(which is an img tag shown in developer tools) that is embedded in excel webpart, I have zoomout that img.
In Developer tools i see below code:
<div id="ctl00ctl00_sheetContentDiv" class="ewr-sheetcontainer ewr-grdblkcontainer ewa-scrollbars" role="presentation">
<div class="ewafo" id="ctl00_ctl35_g_ec06c24e_5aac_4ae3_af75_93564d395086_ctl01_ctl00__0_1.11.0" style="top: 133px; left: 327px; width: 480px; height: 274px; z-index: 50;">
<div class="ewa-fo-img-div" style="visibility: visible;">
<img src="http://mydummyserverlink" title="Excel chart or image" alt="Excel chart or image" onerror="_ewa_oile(this,'Failed to download chart or image');" style="width: 100%; height: 100%; border: 0px; display: block;" usemap="#ctl00_ctl35_g_ec06c24e_5aac_4ae3_af75_93564d395086_ctl01_ctl00_imagemap_1.11.0_3"/>
</div>
</div>
</div>
In View Source I see only the outer div:
<div id="ctl00ctl00_sheetContentDiv" class="ewr-sheetcontainer ewr-grdblkcontainer ewa-scrollbars" role="presentation"></div>
In fact I am trying to access the div using its class "ewr-sheetcontainer" like
$(".ewr-sheetcontainer")
But it is returning what it has in view source.
Thanks in advance,
Madhu M.
If an element is present in devtools, then you should be able to access them with standard methods.
With the example given in your link, if we have
<table id='mytable'>
<td>cell1</td>
<td>cell2</td>
</table>
<tbody> is not in the original code. However, it is interpreted by the browser as:
<table id="mytable">
<tbody>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</tbody>
</table>
You can still use CSS or JavaScript (jQuery) selectors to access <tbody>.
jquery
$('#mytable tbody')...
css
#mytable tbody { ... }
If this example isn't relevant to you, then please post your relevant HTML for us to look at more closely.
With your updated question, my guess is that you are trying to select that parent container before it has any children in it. Try wrapping your selector in a document.ready or some other function that would make sure the content is already loaded.
$(document).ready(function(){
$('.ewr-sheetcontainer')
})
My webapp uses a
<fb:login-button>
which is XFBML (eXtended Facebook Markup Language) and is rendered to:
<fb:login-button login_text="" class=" fb_iframe_widget" fb-xfbml-state="parsed" fb-iframe-plugin-query="app_id=[my app ID]&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&><span style="vertical-align: top; width: 0px; height: 0px;"><iframe name="f1987cba84" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.facebook.com/plugins/login_button.php?app_id=[my app ID]&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df15dab5c84%26domain%3Dmyapp.com%26origin%3Dhttp%253A%252F%252Fmyapp.com%252Ff1e9e1d5b8%26relation%3Dparent.parent&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20&sdk=joey&size=xlarge" style="border: none; visibility: hidden;"></iframe></span></fb:login-button>"
For some reason, the button contains a 1000 x 1000 px iframe. Of course, this doesn't actually display as 1000 x 1000 pixels on the webpage, but it's enough to confuse all browsers into temporarily displaying a scrollbar while the button is rendering, on page load.
Is there any way to stop this scrollbar flickering, aside from the hack of hiding the scrollbar in CSS using overflow:hidden and then setting document.body.style.overflow = 'visible'; in Javascript once the button is finished rendering?
If you don't need a 1000 pixel iframe, you can always just specify a different width using CSS.
http://jsfiddle.net/jjordanca/6UEHp/
HTML:
<p>Hi.</p>
<iframe width="1000px" height="300px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:login_button Facebook Social Plugin" src="http://www.microsoft.com"></iframe>
<p>Bye.</p>
CSS:
iframe {position: relative; width: 500px;}
Notice that the CSS width specification overrides the inline width specification.
Alternatively you could add the following CSS to the parent div (the one with class="fb-like"):
width: 48px; height: 20px; overflow: hidden; text-align: left
Thanks in advance for any and all help and responses. I have a fixed div which floats at the bottom of the screen and is used as ad space for a mobile version of a website. The live version can be found here: http://www.catholiccourier.com/?mobileFormat=true . For some reason, when I try to re-size the browser window, the image inside the fixed div does not seem to shrink properly. If I resize the window abruptly the image shrinks, but it wont resize the same way as the header logo for example. Also it does not seem to stay centered. I have tried margin:0 auto; and text-align:center on the outer div, but it does not seem to work. There are some script tags inside the div as well as noscript, and I am wondering if they may be the cause of the issue.
You can see all of the code in the live website, but here is a copy of some of the code.
<div id="adSpace" align="center">
<script language="javascript" src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&IFR=False&Browser=NETSCAPE4&PageID=9311&SiteID=2&Random=1375796513537"></script>
<a href="http://catholiccourier.com/banman/a.aspx?Task=Click&ZoneID=43&CampaignID=265&AdvertiserID=79&BannerID=242&SiteID=2&RandomNumber=655331242&Keywords=" target="_Blank" class="ui-link">
<img src="http://catholiccourier.com/banman/ads/3/HOLY-SEP-REWORK_fix.gif" width="728" height="90" alt="Holy Sepulchre Cemetery 585-458-4110" align="Center" border="0">
</a>
<br>
<noscript>
<a href="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Click&Mode=HTML&SiteID=2&PageID=9311" target="_blank"> <img src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&Mode=HTML&SiteID=2&PageID=9311" width="728" height="90" border="0" alt=""></a>
</noscript>
</div>
Please help and thank you.
you can use position:absolute for your div
.ui-mobile #adSpace {
position: absolute;
bottom: 0;
background-color: #e6e6e6;
width: 100%;
height: auto;
max-height: 90px;
z-index: 9999;
text-align: center;
}
The table below is used to display a map and some relevant data( I cleaned everything for better readability). The left part is a "vertically scrollable table". The right part is a div that shows the google map.
It is set to 500px now and I am wondering how can I make it "fill" the available screen real-estate.
<div id="maparea">
<table style="width:100%; position:relative;border-bottom: 1px solid #888888;margin: 0 auto;" >
<tr>
<td width="120px">
<div style="padding : 4px; width : 196px; height:500px; overflow : auto;">
<div>
<table width="100%" style="border:1px solid #888888;padding : 0px;">
<tr>
<td style="font-size:xx-small;">
<b>Name: </b> name<br>
<b>Unit ID:</b> this is id<br>
<b>State:</b> IL <br>
</td>
</tr>
</table>
<table><tr><td></td></tr></table></div>
</div>
</td>
<td width="100%" height="100%">
<div id="googlemaps1" style="width:100%; height:500px;position:relative;margin: 0 auto;"> </div>
</td>
</tr>
</table>
</div>
Please check out this article i have below. You should not be using tables to layout or grid up your pages as you have done.
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Also just a hint as well, you shouldn't be using inline CSS styles it is very bad practice and makes modifying templates and pages very difficult in the future so use classes and a stylesheet to define any styles and/or layouts for yout pages. They are more dynamic and much easier to fix later on.
Demo of clean coding for you here: http://jsfiddle.net/nshJH/
Using <div>'s you can just use the
float: xxxx;
clear: xxxx;
This is a simple example of a clean fluid page for you that is dynamic to the content it contains. Also please note that i can change any of the width or text properties on the fly through one place in my CSS...
you can use a fixed or absolute position of the table and use bottom and top coordinates to fix the height.
table {
position: absolute;
top: 0px;
bottom: 0px;
width:100%;
}
greetings!
In order to stretch it out vertically, you have to set every nested element from html down to have height: 100%. Should look something like this:
html, body, #maparea, table, #googlemaps1 { height: 100%; }
For contrast:
Without the height CSS set
With