|
JavaScript - Iframe To Point To A Certain Setion Of A Website
ok i need a bit of advice..
I have a webpage and i want to put a section of another website on to my own website.. i have a www.bebo.com profile and i only want to show the comment section on my website.. my profile is www.bebo.com/thegaadiscos is there a way to only show the comments div of the bebo site on my own website? What i want is a bit like the face book section of this website http://www.alexandraburkeofficial.com/ How would this be done does anyone know.. Similar TutorialsHello. I have built a basic website that contains an iframe in the middle, called "iframe1". In this iframe I wish to load an external message board from proboards.com. In my code I can easily do this by making a button or hyper-link with the href="httproboards.com/myforums" and the rel="nofollow" target="iframe1" When I do this it will load inside of it the iframe jsut as I want it to. However, my the problem is when you click on the button to login its coded to target "_top" and it opens on the entire page replacing the whole website. If i run firebug (a real time HTML editor). I can easily locate and change the link code to rel="nofollow" target="iframe1". But How can I write a script in javascript in my webpage code to do this as soon as the iframe has loaded the external messageboard? I have also been trying things like javascript:void(document.iframe1.getElementsByTag("a")[5].rel="nofollow" target="iframe1") but i have had no luck so far in changing the target without the aid of firebug. Here is the code that needs to be changed. the rel="nofollow" target="_top" needs to be altered somehow to rel="nofollow" target="iframe1" as soon as the frame has finished loading the messageboards. Code: <p><font size="2"> Welcome Guest. Please <a href="/index.cgi?action=login" rel="nofollow" target="_top">Login</a> or <a href="/index.cgi?action=register" rel="nofollow" target="_top">Register</a>.<br/>Nov 19, 2010, 7:23pm </font><br /></p> Heres a screenshot that may help, as you can see I have easily changed the target of the link to="iframe1" using firebug, but I need to hardcode a script in my website that does this automatically after the iframe has loaded the forums page. http://img191.imageshack.us/img191/7264/26796014.jpg Thanks to for any help. Hello I need to do a portfolio of paintings and i found a site similar of what i have in mind. The site is http://www.pikaboo.be/ It's great because its using javascript only. I just don't know how to start my reserach for that transitions and moving objects and that stuff Anyone can give me a few tips on how to start? I have been looking at jquery and mootools it does some stuff taht it's on this site but the movement of objects and the way as they appear on the screen one by one and all that pretty stuff i have no idea how to search. Anyone can help me on where to start and how to do something like this? THank you I am well versed in ActionScript and I have done a lot of this already in As3.0 using XML Node Object. However my client wants this application to be more friendly with iphones/ipads. So we are going to have to restart this and go with Javascript which we know very little about. Basically the internet application is going to be a 'Build your own Itinerary' for a huge rock event, where we have to sort each band selected by the user based on [Date:4th or 5th of July] and [Time Playing]. Those are the only two nodes we need to check, the [date] is obviously going to split it into two groups, and the [Time] is when the band is playing in that group and there will need to be an if/then to check for conflicts. other nodes like [Name] would be used to just add each of the bands selected to that list with .append() I guess. And [Stage] is a somewhat irrelevant node stored and displayed with each item. So. In the professional opinion of those on this board... Where is a good place for a group of 'AS3.0 wise guy hacks' to start cracking at this with JavaScript? What would you suggest for rookies like us making an emergency jump to HTML/Javascript? Thanks so much in advance for the assistance. Hi im wanting to know how does the computer know whos scored more in a game? Thanks, Paul I read somewhere (I think from Douglas Crockford) that void is a completely useless operator. What is its actual purpose? Is there anything it's good for? I see lots of javascript:void(0) hyperlinks all over the place. From what I gather, it just disables the link's default behavior...buy why not just make the href="#" or return false from an onClick handler? Can anyone enlighten me? Hey, I was wondering if it is possible to make an image change whenever an anchorpoint on my page reaches the center or the side of the screen... Thanks for your help! Hello all, How to set decimal point in javascript ? e.g. var num1=23.12345; I want output as 23.12 How can i do this ? Please, guide me. Thanks function below will output price value in text field based on drop-menu option. It's working but I want it's always show value in 2 decimal point for variable 'price'. Can anyone help me with this problem? function findPrice() { if (document.getElementById("region").value == "blank") { var price = document.getElementById("price"); price.value = "<?php echo 'Choose your region to get the price'; ?>"; } if (document.getElementById("region").value == "Peninsular Malaysia") { var price = document.getElementById("price"); price.value= '<?php echo $PM_Price; ?>'; } if (document.getElementById("region").value == "Sabah/Labuan") { var price = document.getElementById("price"); price.value = '<?php echo $SL_Price; ?>'; } if (document.getElementById("region").value == "Sarawak") { var price = document.getElementById("price"); price.value = '<?php echo $SR_Price; ?>'; } } Someone please point me in the right direction. Basically what i'm trying to do is, Post up a nice image map up top of a page with several diff images (all same dimensions), and when the user clicks on one of the images, it loads down in a section below, without reloading the page. I have drawn a small diagram to show you guys what i'm talking about. So far, all I've found, are scripts that use some sort of lightbox that covers the entire page. I would like to try to stay away from flash if I can. The main browser, does'nt necessarily have to be one big image with a map, but it would make it look so much better if it looked matched the games menu. I'm trying to replicate a stats game menu, inside my webpage, so ppl can browse just like they do in game. Example: What I'm trying to replicate: When a weapon on this menu is clicked, it loads up on the right, and gives a brief description. I"m just trying to replicate the functionality of this menu really. So are there any kind of scripts out there that already exist, where I could accomplish this? or how would i go about this. just need someone to point me in the right direction. Thanks a million Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul 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. Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? hello! i am new here and i want help! i have a problem with the scrollbar. i want to stay in a certain point after click in a onclick event. this is not happened and my scroll bar goes on the top of my page. what i can do? my code is this: <a><xsl:attribute name="href">#</xsl:attribute> <xsl:attribute name="onClick" ><xsl:text>displaybody('</xsl:text><xsl:value-of select="fileDesc/sourceDesc/@n"/><xsl:text>')</xsl:text></xsl:attribute><div id="a" onclick="definesearchmode()" align="center"><b>click here.</b></div> </a> the function displaybody shows me what i want to see and the definesearchmode() has a code to hide the phrase (click here) when you click there. thank you. Hi, So, i'm using the jkpanel dropdown script in my functional prototype to show context-sensitive design notes for our integrators. it's pretty cool, but i have an implementation question .. i have many source html files that call the jkpanel script, and each page requires unique content to be loaded into the dropdown panel .. but, what i see is that the drop-down content html file is hard-coded in the .js file. in other words, i need to create a .js 'and' and html for every different set of content i want to load into the dropdown panel .. so, if i have 12 html files to hold the drop down content, i also have to create 12 different versions of the .js file to point to them .. this seems like overkill .. is there a way to always point to the same jkpanel.js file in my <head>, but load a different html file to populate its content? Thanks! RL How to fix a infowindow or a info template to a point so that when i drag the map the infowindow will no change place or move ...what is the code...and where shld i place it at? this is my code : var stX = "23319.3347409758"; var stY = "28825.7191286444"; var pt= new esri.geometry.Point(stX,stY,map.spatialReference); //var strImage = "http://www.rw-designer.com/i/download48b.png"; var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25); var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"}; var infoTemplate = new esri.InfoTemplate(); infoTemplate.setTitle("Building Name:"); infoTemplate.setContent(getInfoContent); var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate); gLayer.add(graphic); } function getInfoContent(graphic){ var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"}); var c1 = new dijit.layout.ContentPane({ region: "top", style: "height: 20px width: 100%", content: "hello" }); bc.addChild(c1); //make a tab container var tc = new dijit.layout.TabContainer({ region: "center", style: "height: 65%; width: 100%; " }, dojo.create("div")); //display attribute information var cp1 = new dijit.layout.ContentPane({ //style: " background-color: red; ", title: "<font color= #E4287C><b>detail</font> ", content: "sfdfsdfsdf" }); tc.addChild(cp1); bc.addChild(tc); return bc.domNode; } dojo.addOnLoad(addSymbol); Hi. I am trying to make one small modification to a website. I just want to make an image that, when clicked, scrolls to a certain point. Pleeeeeeaaaaaase help! This is the javascript that I think controls the scrolling: var element_y; var swiffy; var cur_groupid; var group_sortable = new Array(); var lightbox; var content; window.addEvent('load', function() { checkScrollerWidth(); checkImages(); }); function checkImages() { var check_w = window.getSize().x + 500; var winh = window.getSize().y; var divs = $$('.single_image_holder'); for(var i=0; i<divs.length; i++) { if(divs[i].getChildren().length) continue; if((parseInt($('main_images').getPosition().x) + parseInt(divs[i].get('xpos'))) >= check_w) return; var img = new Element('img', { 'src': divs[i].get('source') }); divs[i].adopt(img); } } window.addEvent('resize', function(){ checkScrollerWidth(); }); function checkScrollerWidth() { if($('scrollbar2') && $('content2') && $('handle2')) makeScrollbar( $('content2'), $('main_images'), $('scrollbar2'), $('handle2'), true); } function makeScrollbar(content,checkContent,scrollbar,handle,horizontal,ignoreMouse){ if(checkContent.getScrollSize().x < scrollbar.getSize().x) { handle.setStyle('display','none'); return; } handle.setStyle('display','block'); var steps = (horizontal?(content.getScrollSize().x - content.getSize().x)content.getScrollSize().y - content.getSize().y)) var slider = new Slider(scrollbar, handle, { steps: steps, mode: (horizontal?'horizontal':'vertical'), onChange: function(step){ var x = (horizontal?step:0); var y = (horizontal?0:step); content.scrollTo(x,y); checkImages(); } }).set(230); if( !(ignoreMouse) ){ $$(content, scrollbar).addEvent('mousewheel', function(e){ e = new Event(e).stop(); var step = slider.step - e.wheel * 30; slider.set(step); }); } } I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was. More information: I am a C programmer who morphed to a Java programmer who knows some javascript. The JSP page looks like this: -------------------------------------------------------------------- Some text and text fields for some basic information -------------------------------------------------------------------- The javascript wysiwyg editor -------------------------------------------------------------------- The properties box (changes depending on the type of item being inserted) -------------------------------------------------------------------- Submit button, etc. for the page (so the information can be persisted) I have tried: 1. Seven days of searching the web for helpful hints. 2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.) 3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.) I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple. Does anyone have any ideas? Thanks in advance. Carl Hey all, I am having issues with below script. Firebug returns: form[0] is undefined [Break on this error] $(form[0].elements).each(function() { I have this under my form: <script> var thisForm = $('#validateForm'); thisForm.validation(); </script> Code: (function($) {
/*
Validation Singleton
*/
var Validation = function() {
var rules = {
email : {
check: function(value) {
if(value)
return testPattern(value,".+@.+\..+");
return true;
},
msg : "Enter a valid e-mail address."
},
url : {
check : function(value) {
if(value)
return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
return true;
},
msg : "Enter a valid URL."
},
required : {
check: function(value) {
if(value)
return true;
else
return false;
},
msg : "This field is required."
}
}
var testPattern = function(value, pattern) {
var regExp = new RegExp("^"+pattern+"$","");
return regExp.test(value);
}
return {
addRule : function(name, rule) {
rules[name] = rule;
},
getRule : function(name) {
return rules[name];
}
}
}
/*
Form factory
*/
var Form = function(form) {
var fields = [];
$(form[0].elements).each(function() {
var field = $(this);
if(field.attr('validation') !== undefined) {
fields.push(new Field(field));
}
});
this.fields = fields;
}
Form.prototype = {
validate : function() {
for(field in this.fields) {
this.fields[field].validate();
}
},
isValid : function() {
for(field in this.fields) {
if(!this.fields[field].valid) {
this.fields[field].field.focus();
return false;
}
}
return true;
}
}
/*
Field factory
*/
var Field = function(field) {
this.field = field;
this.valid = false;
this.attach("change");
}
Field.prototype = {
attach : function(event) {
var obj = this;
if(event == "change") {
obj.field.bind("change",function() {
return obj.validate();
});
}
if(event == "keyup") {
obj.field.bind("keyup",function(e) {
return obj.validate();
});
}
},
validate : function() {
var obj = this,
field = obj.field,
errorClass = "errorlist",
errorlist = $(document.createElement("ul")).addClass(errorClass),
types = field.attr("validation").split(" "),
container = field.parent(),
errors = [];
field.next(".errorlist").remove();
for (var type in types) {
var rule = $.Validation.getRule(types[type]);
if(!rule.check(field.val())) {
container.addClass("error");
errors.push(rule.msg);
}
}
if(errors.length) {
obj.field.unbind("keyup")
obj.attach("keyup");
field.after(errorlist.empty());
for(error in errors) {
errorlist.append("<li>"+ errors[error] +"</li>");
}
obj.valid = false;
}
else {
errorlist.remove();
container.removeClass("error");
obj.valid = true;
}
}
}
/*
Validation extends jQuery prototype
*/
$.extend($.fn, {
validation : function() {
var validator = new Form($(this));
$.data($(this)[0], 'validator', validator);
$(this).bind("submit", function(e) {
validator.validate();
if(!validator.isValid()) {
e.preventDefault();
}
});
},
validate : function() {
var validator = $.data($(this)[0], 'validator');
validator.validate();
return validator.isValid();
}
});
$.Validation = new Validation();
})(jQuery);
I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. |
|||||||