Thanks for you replies. Sorry, if it doesn't make sense I will try again, I'm probably complicating things!
I have a frameset index.html, with top.php with is just the radio stream, under that is index.php which is the full joomla website with navigation and everything.
The problem is, if users find the website via a search engine. It will take take them to just the index.php and they won't get the frameset with the top.php. I was using this code in the top.php and index.php:
if(self.location==top.location)self.location="index.html";
which works great apart from it takes the user to index.php no matter what page they were looking for via a search engine.
So I found this article (look under 'A better way' section) which shows you how to code it so if the user's content is on about-us.html, it will take you to that page but still ensure it is in the frameset.
http://scriptasylum.com/tutorials/frameredirect/frameredirect.html
I would like something like that but unfortunately with it being a Joomla website, I don't have page1.html, page2.html etc to be able to add the code and change it accordingly as per their instructions. I only have one page index.php which generates the pages dynamically 'on the fly'
So does anyone know a way I can do what I am wanting...
The frame set is at http://www.housocial.com/new/index.html
Just the joomla part http://www.housocial.com/new/index.php
Thanks again
You may extract the filename via RegExp(I'm not sure if this is what you're asking for)
if(self==top)
{
self.location="index.html?"+encodeURIComponent(location.href.match(/\w+\.html$/));
}
A more flexible solution that takes care of GET-parameters and anchors:
(
function(url,pattern,query,hash)
{
var filename=location.pathname.match(pattern);
if(filename)
{
url+=filename;
if(query && location.search)
{
url+=location.search;
}
if(hash)
{
url+=location.hash
}
location.href=url;
}
}
)('http://www.housocial.com/new/index.php/', //target-URL
/\w+\.html$/, //pattern to search for
1, //include QUERY_STRING
1 //include hash
)
Related
I am a very, very beginner at coding. And I think I am close to achieving something, but just can't get it to work just right.
Our company loads our product database into a specific program that is searchable by customers in our industry. Until I figure out how to tie into the API they provide, our website lists all of our products through iframes.
Quite often I have a client asking me to provide them a direct link to a specific product number. I'd rather not try to create a separate page with an iframe specifically linked to that one product, so I've been searching online for how to accomplish all of this.
My site is promo-central.com
I built a special search page at promo-central.com/searchby.html
I am hoping for some way to be able to give my client a link to a product (SBP26 for example) in the form of something like www.promo-central.com/searchby.html?SBP26
That will then tell the iframe on that page to load the src based on that extra info in the URL.
Here's what I currently have:
Link that i'd like to work: http://promo-central.com/searchby.html?itemnum=sbp26
The URL that should be called in this situation to correctly load the iframe would be http://www.promoplace.com/ws/ws.dll/StartSrch?DistID=36182&itemnum=sbp26
Here's the code on the page:
<iframe height="100%" name="WE_Frame" id="WE_Frame" src="http://www.promoplace.com/ws/ws.dll?DistID=36182"></iframe>
<script>
(function() {
var frameBaseSRC = document.getElementById("WE_Frame").src;
var frameQueryString = document.location.href.split("itemnum=")[1];
if (frameQueryString != undefined) {
document.getElementById("WE_Frame").src = frameBaseSRC + "&itemnum=" + frameQueryString;
}
})();
</script>
To me this looks like it should work, but it doesn't work for me.
Am I way off? Or do I just have some kind of small issue?
I REALLY appreciate any help, or alternate ideas you may have.
Thanks in advance!
You are missing "StartSrch" from the base iframe src that you are trying to append the query string to. Your iframe just needs to be updated like this:
<iframe height="100%" name="WE_Frame" id="WE_Frame" src="http://www.promoplace.com/ws/ws.dll/StartSrch?DistID=36182">
I am trying to refresh just a part of my website (the left part in which a list with topics appear), but it don't work for me. I get a very weird screen on that left part if I click the refresh button. The script I am using is this:
$(function() {
$("#refresh").click(function(evt) {
$(".bgleft").load("left.php")
evt.preventDefault();
})
})
The weird screen I am getting is a white blank screen with a random text on it (that does not exist). I don't understand why it is happening. For a live example: go to (edited out)
and click on "refresh" at the left frame.
Edit:
The HTML snippet: <body class="bgleft">
In left.php there are two lines of code which are showing theese characters.
for(var n = 1; n < 7; n++)
document.write(String.fromCharCode(Math.round(Math.random()*25)+97));
Try to remove them, it should help.
Also as sad in other answers send only contents of <body> in response because scripts are already included in the site.
It's generally not a good idea to send a complete HTML page when doing a partial update. If you look at what's produced by your left.php, it's the complete page (with <html> tags and everything) you use in your iframe.
Either create a page that only renders the body of the left.php and use that for partial update. Or look here for how to refresh an iframe.
PS: Framesets are hopelessly deprecated and really limiting in terms of design, dynamic/javascript functionality and future extensibility. Consider not using them...
You should be only fetching the content to be updated, not the whole page. Currently, the whole page is being fetched including html, body and even script tags. The jQuery and other scripts are also being loaded again because of this. This can cause major problems later.
How come you are loading the same page HTML, HEAD, BODY inside the current BODY tag?
$(function() {
$("#refresh").click(function(evt) {
evt.preventDefault();
$(window.top.window).find('frame[name=left]').reload();
})
})
If I have a static HTML homepage, is there a way of embedding some Javascript to see if I am on the home page? What I want to do is if a user is not on the homepage, display a "home" button on my navigation bar. So once I know if he's on the homepage I can use an if-else statement. Not familiar on how to do this in Javascript. I would do this in PHP, but due to restrictions on the project, I am not allowed to use PHP. This site is pure HTML pages.
The reason I need Javascript to detect the page, is because all of the pages, including the homepage are to be the same template (again, not my decision). If it wasn't for this I could create a template for every page but homepage. So that leaves me with the problem.
My current thought is to use something like this:
<script type="text/javascript">
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
if(sPage != "index.html"){
$turnonhomelink=true;
}
else{
$turnonhomelink=false;
}
</script>
And then for the link:
<script type="text/javascript">
if ($turnonhomelink==true){
echo '<li>Home</li>';
}
else{
//echo nada
}
</script>
Besides the normal "this won't work if Javascript isn't on", is there anything I am missing?
The line I am most concerned about is this: if(sPage != "index.html")
Important to note is that this site is only 1 layer deep link-wise (all HTML pages in one directory), but is this the proper way of comparing strings in Javascript?
May i suggest that absolutly no javascriptr is required to achieve this. There are plenty of ways to do this with just css. Especially if you are on a static html page. The easy way would be to add a id to your body tag to indicate you are on the hompegae. Then add some css to make the home button invisble when on this page. Somethiong like this:
HTML:
<body id="homepage">
...
<li id='home-button'>
<a href='/index.htm'>Home</a>
</li>
...
CSS:
#homepage #home-button {
display: none;
}
This way the visistors with js disabled get the same experience as the normal visitors...
this should be fine. Also at what point in the html , would you make this check is important (for the url to contain "index.html") normally you can create a function doAfterLoad() and put a call to doAfterLoad() that can check for the url substring and then accordingly show/hide the homepage link. you can use html body onLoad event also.
ps: you dont need to follow $ prefix to a var in js even though its a valid var name:
$turnonhomelink==true
i have one website which is working on templates.
in the template there is one main image & i want to replace that main image on some pages only not on full website. what i am looking for is to change the main image to new image on page where i need with ajax.
when i see the css of that template i found following code to show image
.top-bg{
background:url(../images/top-bg.jpg)
top center no-repeat;
position:relative;
}
and on php page i found following line which bring image.
<div class="top-bg">
i need ajax / jquery code to change image.
my basic logic is, i will get that image URL from MYSQL databse and assign to one variable and then i will change the image which come from database, actually its one page displaying products and i want to display main image of product with ref to loaded product, i hope you will understand what i need at the end...
Thanks
Thanks for every one how reply, i found the solution
$(document).ready(
function(){
$('#imageContainer').css("background-image", "url(images/cube.jpg)");
}
);
this did trick for me what i need, any way thanks and also for -ve voting thanks... :((
While I think Ajax is the wrong solution for your problem, I'll offer you the following (which, at least, meets your question):
$('#changeImage').click(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
return false;
}
);
Clicking an element of id="changeImage" will load the contents of id="imageID" from the php file located at the url of http://path.to.php/file.php into an element (presumably div, but whatever) of id="imageContainer".
That said, I'd suggest following #Nick Craver and #Aaron Digulla's advice and use CSS.
If you view source there's a working demo of jQuery's load on my site (posted in response to a different SO question) at http://davidrhysthomas.co.uk/play/loadDemo.html.
Edited in response to comment from OP.
To do this automatically, on page-load:
$(document).ready(
function(){
$('#imageContainer').load('http://path.to.php/file.php #imageID');
}
);
You don't need any JavaScript at all for this, just include another stylesheet (or <style> block) on the webpages you want the imaged changed on. Just have this in there:
.top-bg { background:url(../images/other-image.jpg); }
Or the <style> version:
<style type="text/css">
.top-bg { background:url(../images/other-image.jpg); }
</style>
As long as this is declared after that template stylesheet, that background property will override the template one, and you'll have your custom image on just those pages.
I think AJAX is the wrong approach here. AJAX should be used to load new data when the user interacts with the web page.
Your problem can be solved much more simple: If you can add an AJAX call to the code of the page, why not simply add a new CSS style:
.tob-bg {
background:url(../images/other.jpg) top center no-repeat;
}
Or create a second template and use that for all but the main page.
I was thinking of using Fiddler for the following purpose...
I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the
<script type="text/JavaScript" src="myscript.js"></script>
line will be included in the HTML <head> section.
Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?
Thanks!
----Update----
For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.
If someone is interested I could upload the BHO code here.
-Thanks!
Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)
The CustomRule.js file opens. Scroll down until you find the line
static function OnBeforeResponse(oSession: Session)
This is where your code goes. Here you can change the server response before the browser sees it.
The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions
I first show you the jQuery code I want to include
<script type='text/javascript'>
$(function() {
var newLink = 'Unanswered jQuery';
$('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
});
</script>
Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)
//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
oSession.HostnameIs("stackoverflow.com")) {
// Remove any compression or chunking
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
// Match the jQuery script tag
var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
// replace the script tag withitself (no change) + append custom script tag
oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('Unanswered jQuery');})</script>");
// Set the response body to the changed body string
oSession.utilSetResponseBody(oBody);
}
I think you should now able to hackyourself together a piece of code which fits your problem.
Example
// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");
if you use jQuery you can add js on the fly. I would probably think you can have a method which would include/exclude your script based on some query param. This is how you would include JS with jQuery
$.getScript('someScript.js',function(){
//Do something here after your script loads
});
Haven't tried it, but how about GreaseMonkey for IE?