Is it possible to link to ONLY a div on a web page? For example,
<html>
<body>
Here is some content I don't care about
<div class="stuff">
Here is some content I want. Blah blah. It may change from time to time
</div>
Here is more content I don't care about and do not want to see when this link is clicked
</body>
</html>
Is there a hyperlink that will display only the contents of "stuff" with nothing else?
For further clarification, if someone were to make an of this link, nothing else from that page would appear in the iframe.
You could use a jQuery .load() call to get that fragment of your page and load it on your single page:
$('#result').load('your-page.html .stuff');
The short answer is: No
The longer answer involves a bunch of JavaScript on the page where the content is to be hidden (i.e. you couldn't do it to a third party site, and if it is your own site you would almost certainly be better off just creating a separate URI you could call)
Related
I have a menu bar that links to local webpages that is working fine except that when I click on the link on the menubar it goes to the webpage in question leaving the webpage with the menubar, but I wish to load the page below the menubar so the user can this use the menubar to navigate. Should I be using iframes? sorry haven't used HMTL5 in quite some time any help is much appreciated.
Neil.
<div class="menu">
Home
Index of Services
Schedule
Examples
</div>
<div class="content">
This page is to help you organise
</div>
Yes, you need frames. Or, the most common, to have the same menu code on all htmls, because with frames your url won't change unless you do some tricks.
If you don't want to duplicate code you could use PHP. Then you could create an index.php with the menus and with includes to the page content.
Edit:
You can also do it with some JavaScript but it also has the same problems with the url. The site will also not work if JavaScript is disabled.
Edit2:
The tricks for frames and javascript I said before can be achieved without url rewrites and with plain HTML+CSS+JS is with anchors.
Basically you change your urls to anchors with the page name, and when the page is first loaded you check this hash so the correct frame opens when someone enters your url like http://mypage.com/#examples. You can access and set the hash with window.location.hash.
So your code would look like:
<div class="menu">
Home
Index of Services
Schedule
Examples
</div>
<div class="content">
This page is to help you organise
</div>
For both with or without frames you need a JavaScript event attached to each menu item.
With frames the JS basically changes the frame url when the user clicks on the menu.
Without frames you use xhr to download the html, and then, if you successfully downloaded the html, you delete everything inside div.content and replace with what you downloaded with innerHtml.
For both solutions you need to add a JS that checks the hash when you first load the page to update the displayed page accordingly.
As for PHP or other server-sided "script" any beginners tutorial will explain how to do it.
The title says it all, how would I make it using only html, no JAVASCRIPT, to stop the page from jumping back to the top if a user clicks on an empty tag? So for example, if at the very bottom of my site, I have a link that is empty, but click on it, it takes be clear back up to the top...
A simple solution to this would simply put in the a tag:
Title
In doing this, it won't scroll your page back to the top. To have it scroll back to the top, take out the a after the # symbol...so it would look like this:
Title
That is the best explanation I can give you without any code provided from you.
Give that a try and it should work with what you are asking for...No javascript is needed. In fact you can even make the #a jump to a different location if you'd like on your page :)
UPDATE:
This may suit you better! Add this to either a js file or add it inline with you html document.
Separate js file (just make sure to call it externally on your html file):
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
Example: $('#link a').removeAttr('href'); or $('.link a').removeAttr('href'); or even $('a').removeAttr('href');
Now, if you want to achieve this via inline on your html file, simply do this:
<script>
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
</script>
Again, you can use any of the examples above as well. In fact there are many ways you can achieve this now that I think about it...Hope that helps :)
If your link isn't supposed to be linked (such as when it's just a placeholder for where a link could be) then you should not add an [href] attribute to the <a> element
I'm using watir-webdriver to do multi-browser front-end automation test. Here I got a question. When the driver go into the first iframe of the page, it can get out, to find elements outside iframe, but if driver go into the iframe inside one iframe of the page, it can not go out and find the element of the outside page. the structure may look like this:
the main page:
<div>
<iframe src='a.html'></iframe>
</div>
a.html:
<div>
<iframe src='b.html'></iframe>
</div>
when web driver go into the b.html, and find elements in it, it can not get back to the main page.
Is anyone familiar with watir-webdriver can figure this out??
Thanks so much!
To change focus back to main page from an iframe:
#browser.frame(:index, 0).locate
I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).
I have read and experimented with suggestions from these articles and more:
http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html
I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
So then I have this in the body of the page:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box
profile_id="***my ID here***"
width="450"
height="600"
colorscheme="dark"
show_faces="false"
stream="true"
header="false"
logobar="0"
css="http://***my domain here***/css/FBstyles.css?1"
href="http://www.facebook.com/***my page name here***"
></fb:like-box>
But I still get these sorts of errors:
"(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."
Where am I screwing up?
I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.
You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.
EDIT:
In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.
I can see this web site is somewhat over my head, but I'm having trouble finding an answer.
I want to put my header, with links to other pages, over external content. Here's why: My MLM gives me a replicated web site that they maintain. I want to add links to my blog, contact info, even meta tags to the site. I though I had it done by using an iframe. I have my content at the top, and the MLM site shows up in the iframe. (here is the link www.trivanijoanne.com) The problem is that the iframe doesn't resize when the external content changes, and it is confusing for the user to need to scroll up to see the page. Also, the pdf pages don't load inside the iframe.
I looked around online and see that iframes are a thing of the past. What should I be using to accomplish this task?
you could use PHP to get the page markup (possibly using cURL or fopen) and display it whilst putting your own content into the body section
(str_replace()
<body>
with
<body><div id='header'>my content</div>
)
and attach your own css stylesheet with
*{
position:relative;
top:-100px;
}
if you cant use PHP for some reason then this could also be done using javascript and iFrames