JQuery :: Splitter Not Working Over Iframe?
Mar 14, 2009
I am using the jquery splitter from [URL]My right pane is fully occupied by an iframe. The splitter doesn't work when I try to drag it over the iframe (drag to right) i.e. the iframe does not resize when the splitter is dragged over it, but the same iframe resizes when the splitter is dragged over the left pane (drag to left). The iframe is contained in a div tag as shown in the html below.
<html>
<body>
<div id="left"></div>
[code]....
View 4 Replies
ADVERTISEMENT
Apr 12, 2005
<html>
<head>
<title>Paste Splitter v1.0</title>
<style type="text/css">
body, input {
font: normal 12px Verdana;
}
</style>
<script type="text/javascript">
/************************
Paste Splitter v1.0
Glenn G. Vergara
glenngv@yahoo.com
Philippines
NOTE:
Please make this intact
if you want to use this
script. Thanks.
*************************/
function PasteSplitter(origMaxlen){ //you can also pass as many field references as needed in the argument
var me = this;
var arglen = arguments.length;
this.flds = new Array();
this.maxlen = origMaxlen;
this.filter = this.NUMERIC; //default filter
for (var i=1; i<arglen; i++){
this.flds[i-1] = arguments[i];
}
if (this.flds.length > 0){
var fld1 = this.flds[0];
fld1.onkeydown = function(event){
extendMaxLength(me.flds, me.maxlen, event);
}
fld1.onkeyup = function(event){
splitPaste(me.flds, me.maxlen, event)
}
if (typeof fld1.onbeforepaste != "undefined"){
fld1.onbeforepaste = function(event){
extendMaxLength(me.flds, me.maxlen, event);
}
}
if (typeof fld1.onpaste != "undefined"){
fld1.onpaste = function(event){
//we need a little delay here before calling the function
setTimeout(function(){
splitPaste(me.flds, me.maxlen, event);
}, 10);
}
}
}
function extendMaxLength(arrFlds, maxlen1, evt){
if (!evt) evt = event;
if (evt.ctrlKey || evt.type=="beforepaste"){
var len = maxlen1;
var arrlen = arrFlds.length;
for (var i=1; i<arrlen; i++){
len += arrFlds[i].maxLength;
}
arrFlds[0].maxLength = len + arrlen - 1; //allow separators in beetween sets (e.g. - . /)
}
}
function splitPaste(arrFlds, maxlen1, evt){
var s = arrFlds[0].value;
//apply filter
switch (me.filter){
case me.NUMERIC:
s = s.replace(/D/g, "");
break;
case me.ALPHANUMERIC:
s = s.replace(/W/g, "");
break;
case me.ALPHA:
s = s.replace(/[^a-zA-Z]/g, "");
break;
default: //custom filter
s = s.replace(me.filter, "");
}
var len = s.length;
if (len <= maxlen1){
arrFlds[0].value = s;
if (arrFlds.length > 1 && len==maxlen1){
arrFlds[1].focus();
}
return;
}
else {
var len=0, start=0, arrlen=arrFlds.length, el;
for (var i=0; i<arrlen; i++){
el = arrFlds[i];
len = (i>0) ? el.maxLength:maxlen1;
el.value = s.substr(start, len);
if (el.value=="" || el.value.length < len){
el.focus();
el.value = el.value; //this trick puts cursor at the end of value after focusing on the field first
return;
}
start += len;
}
}
arrFlds[0].maxLength = maxlen1; //change back to original maxlength
}
}
//filters
PasteSplitter.prototype.NUMERIC = 1;
PasteSplitter.prototype.ALPHANUMERIC = 2;
PasteSplitter.prototype.ALPHA = 3;
PasteSplitter.prototype.setFilter = function(filter){ //custom filter (regexp) may be specified
this.filter = filter;
}
/***************end of script******************/
//SAMPLE USAGE
function init(){
var f = document.forms[0];
//serial number
var ser = new PasteSplitter(f.ser1.maxLength, f.ser1, f.ser2, f.ser3); //pass the original maxlength of the first field and all the references of as many fields as needed
ser.setFilter(ser.ALPHANUMERIC); //set filter to alpha-numeric
//sss number
var sss = new PasteSplitter(f.sss1.maxLength, f.sss1, f.sss2, f.sss3, f.sss4); //default filter (numeric) will be used
}
window.onload = init;
//END OF SAMPLE USAGE
</script>
</head>
<body>
<form>
<h1>Paste Splitter v1.0</h1>
<p>Copy any alpha, numeric or alphanumeric characters, even including separators such as slash (/), hyphen (-), dot (.) or anything, and then paste it in the first field. The characters will be split to all the fields automatically excluding the separator. Very useful for fields like serial number, Social Security number, telephone number and the like. The script works on the basis of the <code>maxlength</code> attribute of the field. It degrades well for JavaScript-disabled browsers, making the <code>maxlength</code> attribute untouched. It works well for IE for all paste commands (<code>CTRL+V</code>, <code>Edit->Paste</code>, <code>right-click->Paste</code>) and partially works for Firefox (<code>CTRL+V</code> only).</p>
<fieldset>
<legend>Information</legend>
<label for="ser1">Serial No.</label> <input type="text" maxlength="5" size="5" id="ser1" name="ser1" /> - <input type="text" maxlength="4" size="4" id="ser2" name="ser2" /> - <input type="text" maxlength="6" size="6" id="ser3" name="ser3" /><br />
<label for="sss1">SSS No.</label> <input type="text" maxlength="2" size="2" id="sss1" name="sss1" /> - <input type="text" maxlength="7" size="7" id="sss2" name="sss2" /> - <input type="text" maxlength="2" size="2" id="sss3" name="sss3" /> - <input type="text" maxlength="1" size="1" id="sss4" name="sss4" />
</fieldset>
</form>
</body>
</html>
If you have any comments, suggestion, bugs found, please feel free to post them here.
View 10 Replies
View Related
Jan 20, 2011
I have my page layout as below:
------------------
frame1
-------------------
****|******
[code]...
I would like to have a splitter (image or a line) between col1 and col2; When i click on it, It should display the cursor as =|= (something similar) and should be able to resize col1 and col2. (I have added * for understanding purpose to display them as separate columns)
View 3 Replies
View Related
Dec 14, 2011
I'm displaying 2 iframes on a page with content from other pages on the same domain. I'm using jQuery to apply a stylesheet to the 2 iframes.
$('#col1iframe, #col2iframe').load(function(){
$(this.contentDocument).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
$(this.contentDocument).find('a').attr({"target":"_top"});
[Code]...
View 5 Replies
View Related
Apr 6, 2010
I've got a problem. I've built a navigation page to be used in an iframe across a site. I've made menus like this in PHP and using arrays but I cannot use PHP here so I thought I could reproduce it in JQuery.
I am able to addClass "on" to selected menu items using the following:
<
script type=
"text/javascript"
>
$(
function
[Code]...
View 1 Replies
View Related
Jun 2, 2009
what im trying to do here is create a dynamic hidden iframe and write a form into it and submit. this approach works in FireFox but not in IE7, below is the code im using
document.forms[form].appendChild(isProcessFQ);
var ifText = document.getElementById(rootElID).innerHTML;
var ifSubmit = document.createElement('iframe');[code]........
But when i run this in IE7 its openings a new blank window after the statement doc.open(); and shows some error(which has no useful details) and not maing any calls to server.
View 10 Replies
View Related
May 26, 2009
Below mentioned code prints properly in Mozila but not in IE7 code...
View 7 Replies
View Related
Apr 22, 2011
I have some javascript code:
first it gets string of the url in the address bar
then it splits the string at the ? and grabs the right half
it then makes an IFrame go to that string(which is yet another url I would manually insert)
here is the code:
function redirect(){
var raw=window.document.location.href;
if(content_address_start=raw.indexOf("?")!=-1){
[Code]....
'content' is the id of the IFrame, and frame.html is the html file this code is inside.
Ok, so everything works perfectly when I test this code offline, but as soon as I load it to my website, and the .src line occurs, it just loads a blank page in the IFrame. What could be causing this? Perhaps certain sites will not allow themselves to be inside iframes? Much thanks in advance. I hope I gave enough information and relayed my problem clearly.
EDIT: It seems that the code works on other sites, just not youtube. Why would it do this and are there any ways around it?
View 5 Replies
View Related
Jul 23, 2010
Just working on this page - [URL]
In Opera, the dynamic resize of the iframe isn't working correctly. As you can see in the code, I have set a minimum height of 200px so the iFrame should always be a minimum height but if the content requires it will increase. It works fine in IE8, Safari, FF, Chrome but not in Opera. In Opera it just sets the height at 200px.
View 9 Replies
View Related
Jul 23, 2010
I am working on this page - [URL]. When you click the Filter By buttons it alters the content of the iframe below it. This works fine in ALL browsers. However, when you click the browser "back" button it should return to the previous clicked Filter By button (and therefore the previous clicked iframe content). This works fine in every browser except Safari. In Safari it just returns to the previous full page (for instance, if I was viewing google before I went to my page and clicked the iframe buttons, it returns to google rather than the previous iframes).
View 8 Replies
View Related
Mar 3, 2007
When i try to dynamically change the height of an iframe in ie through a java-script to match its content (a html page containing a flash movie, it doesn't resize the iframe at first, but when i reload the same page into the iFrame it resizes as planned, how come?This script works well in firefox, safari and netscape, but i cant get it to work in ie(8, 7). And i get the same problems with every resizing script i've tried. This is the script i use:
<script type="text/javascript">
function adjustIFrameSize(iframe)
{ [code].....
I have a flash menu in the first iframe, the buttons on the menu uses getURL(siteToLoad, "contents") to load another html-page into the iframe "contents". Is it possible to make the iFrame refresh automatically though javascript so that i just refreshes the iframe once? Everytime ive tried that it just ends up in a never ending refresh-loop... How can i make this work? Is there any better script for resizing (and refreshing after resize) the iframe height so that it matches to its content?
View 7 Replies
View Related
Dec 20, 2011
I'm displaying 2 iframes on a page with content from other pages on the same domain. I'm using jQuery to apply a stylesheet to the 2 iframes by appending it to the head.
Code JavaScript:
$('#col1iframe, #col2iframe').load(function(){
$(thiscontentDocument).find('head').append('<link rel="stylesheet" href="css/iframe-styles.css">');
[Code]....
View 1 Replies
View Related
Jan 3, 2010
I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, how to make this work in other browsers.
Here is the header code:
<SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
} else {
state = 'block';
} if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
} .....
Here is the code on the page where a link click shows the hidden div and loads the iframe contained.
<p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', '[URL]');
">show/hide me</a></p></td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4;
width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0;
border: 1px solid #000; padding: 10px;"><iframe name="ifrm1"
id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">
Sorry, your browser doesnt support iframes.
</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
View 4 Replies
View Related
Apr 28, 2010
I've built in an iFrame that pulls in various other pages of variable height. Can you make this iFrame render its size based on it's src content ? I've been trying to use the scrollHeight of the frame but it isn't working. My current code:
Code:
<script type="text/javascript">
function resizeIframe (frame) {[code]....
Basically my code always renders the scrollHeight at 150 but the test.html I'm pulling into the frame I've made a height of 500px ?
View 1 Replies
View Related
Mar 3, 2010
I've been trying to get this page working with dynamically loaded iframe sources passed by URL, but I can't seem to get it working.Here's the relavent code:
<script type="text/javascript">
function delineate(str) {
URL = str.indexOf("=") + 1;[code]...
I used the hidden form to change the url to text - advice from another website. I'm sure there are better ways to do it, but I'll explore them as soon as this thing actually works..The types are in a subfolder named types, as shown. The document.write was placed in as a debug helper, and it displays the proper file location of whatever I select with the combo box, but the iframe doesn't change it's src to the selected page! I've tired the last line of the last <script> with several different methods, none of them producing any effect whatsoever.
View 3 Replies
View Related
Mar 3, 2010
I am using a dhtml "Image Slideshow", and I was really happy with I customized its layout to my needs, and it runs perfectly on FF and on IE (wich is very important for me, since in my country most of people still use IE). Check it hereHowever, when I insert the slideshow in my design, it stops working on IE (working in perfection on FF):I am using the original slideshow file in an iframe.(before I tryed to paste the code directly into the page, but it didn't worked, so I thought using an iframe would work, because the code of the original document would be intact)
View 5 Replies
View Related
Feb 8, 2009
I have a simple javascript function loadNPlay('file'),
parent.loadNPlay('file');
on clicke event it simply plays the file in a player in the parent window. with IE and Mozilla its working fine but with Safari, when called from iframe this function doesn't work(it does work, ie loadNPlay(..) when called in the same window, in safari)
I have tried:parent.loacation.loadNPlay(..) as well, it doesn't work.
View 2 Replies
View Related
Mar 5, 2009
To sum up this issue, I have a parent page, which holds some values in hidden input fields passed to them from the url. On this page, I have an iframe with a form in it, to which I want to pass values from these hidden fields to be displayed for the user in the iframe form. In IE, it works. To accomplish this, im just simply doing a <body onload="GetInput()">. The GetInput function does the following, but for about 10 fields:
Fnamefield=document.getElementById('firstname').value = parent.document.getElementById('firstname').value; Thats it. Once the page loads, i see my values. In firefox it does not work. I know the hidden fields are getting their values, but thats as far as it makes it. I have tried calling the GetInput function after the form is written out and not in the body tag, which still works for IE, but not FF.
View 3 Replies
View Related
Jan 2, 2009
i have an iframe inside a page(main). In that iframe, i am calling a java script function that is in the main page.This function call is working in Mozilla , IE but not in Safari and google chrome?? Is there any specific reason for that? when i add the function in the iframe it works.
View 2 Replies
View Related
Oct 25, 2010
Have this in parent document:
function ResizeDocument(...) {
$("iframe"
).each(function
(){ $(this
.contentWindow.document).trigger('customresize'
,null
);});
[Code]...
View 2 Replies
View Related
Aug 18, 2009
I am loading a collection of frames as follows (from jsp source, so ignore <%= %> blocks):
<html>
<frameset name="MNGM_OUTER" rows="50,*,20" framespacing=0
frameborder=0 border=0>
<frame name="MNGM_TOP" src="control/top.jsp" scrolling=no
[Code].....
View 1 Replies
View Related
Feb 18, 2011
I am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work.code....
View 5 Replies
View Related
Oct 7, 2011
Im trying to use javascript history to resize an iframe when a submit button is clicked inside the iframe.
This is what i found so far.
Code:
Us this with iframe:
Code:
Code:
But im not really sure on how to apply this to my iframe, and i know that the resize part also needs to be edited, but what is missing?
View 1 Replies
View Related
Aug 14, 2009
I'd like to resize an iframe into which different (same domain) pages of differing heights are loaded. I can do a first-time resize no problem. It's the subsequent reloads that need to pass back their height to the parent page There seem to be lots of solutions for that around, but few I can see for resizing each time the iframe reloads. One is described here on another board [URL] but unfortunately the test page is no longer around (or indeed the site), so the full code is no longer available there. This one works, almost, for me: [URL] it does resize for me, but not quite sufficiently high each time - about 90% of what is required: [URL] Is there a way to add on sufficient extra margin that scrollbars no longer appear?
View 8 Replies
View Related
Aug 2, 2009
Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.We have a central area which can be longer or shorter depending on the forum.
View 3 Replies
View Related
Jan 27, 2010
I have an order-administrations-system with 2 iFrame (left and right). Can I somehow click a link in the right iFrame and use that info to set a value in a field in the left iFrame?
View 1 Replies
View Related
