I read a while ago there is a specific name for this. Let's say i'm on mysite.com, and I click on www.google.com, and when I get to google.com, there's a big MYSITE.com bar at the top, which easily allows me to go back to MYSITE.com. What is this called, and is there a plugin for this in Drupal?
You may be referring to HTML frames?
http://www.w3schools.com/html/html_frames.asp
These usually perform badly with browser back-forward buttons though.
Don't use frames! They're ugly, will confuse the users, and we're not in 1995 anymore ;)
What you're looking for is CSS fixed menus
http://www.w3.org/Style/Examples/007/menus.en.html
I never used Drupal, but I found that with a bit of googling: http://drupal.org/node/769848
Google don't named it in their press release. A few days ago Google get rid of the black bar.
Drupal has at least two such modules:
Simple menu
Administration menu
As I can see, above replies doesn't answer what you asked. Correct me if I'm wrong.
You are looking for a way to add an iframe toolbar just like about.com or images.google.com does.
You can do this with a raw HTML page that doesn't bootsrap Drupal at all.
You will find External Links module useful if you are willing to create a module.
See http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/ for HTML stuff.
Frame Google just because you think your users will search from there is not a good option, if that's what you are trying to do. That way you could think about framing Facebook and other valuable sites, but trust me, people don't like frames (I just hate them all!)
What you should do is to create a custom search engine for your site, and this is a valuable functionality from Google Search Engine to your users finding stuff on your site (only indexed pages).
If you are interested visit http://www.google.com/cse/
It's definitely done with frames. Here is the relevant code from a Google Translation :
<frameset rows="65,*" frameborder="1" framespacing="0" cols="*">
<frame src="/translate_n?act=url&hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://lamaisonducinema.com/" name="n" scrolling="no" noresize="" marginwidth="0" marginheight="0">
<frame src="/translate_p?act=url&hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://lamaisonducinema.com/&usg=ALkJrhgchorYUw9YujsX2PFQ6ZZSxH4A1A" name="c">
<noframes><script><!--document.location="/translate_p?act=url&hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://lamaisonducinema.com/&usg=ALkJrhgchorYUw9YujsX2PFQ6ZZSxH4A1A";--></script><a href="/translate_p?act=url&hl=en&ie=UTF8&prev=_t&sl=auto&tl=en&u=http://lamaisonducinema.com/&usg=ALkJrhgchorYUw9YujsX2PFQ6ZZSxH4A1A">Translate</a></noframes>
<object style="padding: 0px !important;margin: 0px !important;background: transparent !important;position: fixed !important;border: none !important;-webkit-box-shadow: none !important;top: -100px !important;left: -100px !important;display: block !important;width: 1px !important;visibility: hidden !important;height: 1px !important;" data="safari-extension://com.interclue.ultimatestatusbar-725998GKSY/f41e051d/fixUninitalizedPage.html"></object>
</frameset>
For Drupal 6, it seems the Modal Frame module might do the trick : http://drupal.org/project/modalframe.
They are called fixed menus. Do not use frames.
HTML:
<header><p>I'm always at the top</p></header>
<article>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>...</p>
</article>
CSS:
header { position: fixed; top: 0; left: 0; width: 100%; }
Related
I have uploaded all the files to my web server (I use NameCheap, cPanel).
This is my webpage: www.gloriachen.me
In the landing page, my html and css are:
<!-- Landing Page -->
<div class="container-fluid">
<img src="assets/landing-page.JPG" class="img-fluid" alt="Responsive image" style="width:100%;">
<div class="top-left">
<p> <span>Hi, </span>I am Gloria Chen. I am currently a recent graduate from Australian National University (ANU)
with a master’s degree in computer science. As an enthusiastic fan of front-end development
at the moment, I am keen to look for a job on Web/App front-end development.
</p>
<p> This is my personal blog website. Initially I developed this site for practicing my
front-end skills, especially in programming. I used HTML, CSS, BootStrap 4, JavaScript
as the main languages for building my site, and would like to use Vue.js or Angular.js
for front-end framework building.
</p>
<p> It’s not easy for me to look for jobs right now at the moment, one reason is because
I just finished a surgery of a chest wall tumour removal on this September. For almost
about one and a half month, I was in the process of recovering from the treatment and
procedure. Luckily, my pathology report of the removed tumour is positive, which means
I can still be alive :). I thank God for his preserving. But now I really need to gradually
restore my mind, emotion, will and motivation, and really devote myself into working again.
</p>
<p> Things are not always easy, but I believe I will get a suitable one soon :) </p>
</div>
</div>
/* Text CSS */
.container {
position: relative;
text-align: center;
color: white;
}
.top-left{
width: 50%;
position: absolute;
top: 150px;
left: 70px;
line-height: 2;
}
The text is supposed to be on the top of the image. I tried on my local, and it was successful, like this:
After I upload all my files to the NameCheap cPanel. However, it doesn't work in Safari. If I open the site using Safari, the text won't be on the top of the image. The landing page would be like this:
Anyone knows what is the reason of it and how can I solve the problem here?
Thanks in advance!
It looks correct for me when clicking your click.
Try clearing your browser cache, or holding Shift while clicking the refresh button to perform a hard-refresh, which should force new css to load.
Check the path to your CSS file. your path to the CSS file might not be correct.
I have been experimenting by adding a floating social media share bar to my web page.
The bar renders perfectly in I.E, Firefox, Opera, Chrome, and Safari, but refuses to behave when viewed in Netscape Navigator 9.
It's important for the bar to render properly in all of the above, and thought the problem might perhaps be due to something else on my web page interfering with its correct operation. However, when I test the bar using the mock up page I have posted a link to here, the same problem still exists.
Can anyone suggest what alterations I might make to the source code in order for this problem to be overcome?
Here's a link to my demo page.
http://www.corncreations.co.uk/test/floating_bar.html
Here's a link to the creators page, which includes the source code.
http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html
Any constructive advice gratefully received.
The code used for the demo is available by visiting the second of the links (above), but anyway, here it is:
<style type="text/css">
#floating_bar {
background-color:#fff;
position:fixed;
padding:0 0 3px 0;
bottom: 30%;
margin-left:-60px;
float:left;
border: 1px dotted #f7f7f7;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
}
#floating_bar {
clear:both;
}
</style>
<div id='floating_bar'>
<div style='margin:10px 0 5px 13px;' id='like'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div style='margin:0px 0 0 10px;' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div style='margin:5px 5px 5px 6px;'>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
<script data-counter='top' type='IN/Share'></script>
</div>
<div style='margin:0 0 10px 11px; id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'> Get Widget</a></p>
</div>
As to what I've researched and tried so far - I've read other posts on this forum, and also Googled for an answer, but apart from reading a few posts elsewhere from others having difficulty with their Facebook Like buttons not rendering properly in Netscape, nothing else seemed relevant. I haven't tried altering the original source code yet, as I am not sure what to do that might correct the problem.
1. There's a point when backwards compatibility goes too far.
why Netscape fails to render the bar in the same way as all the other main browsers
You're implying that Netscape is a "main browser" like the browsers you mentioned in your question. Netscape used to have a significant market share, but its time has passed (see History of the web browser on Wikipedia, specifically the timeline chart at the bottom of the article; Also Usage share of web browsers for current statistics).
It makes the question irrelevant from a practical standpoint. It's hard to justifying the question let alone finding an answer, given that you're attempting to support a legacy browser.
But let's assume you have a valid reason for supporting a browser that is virtually extinct...
2. What is the problem?
"The bar ... refuses to behave"
You might as well be saying, "it doesn't work". How doesn't it work? What is the expected behavior, and how is the actual result deviating from your expectation? You shouldn't expect us to download a browser that hardly anybody has used for over a decade to confirm an ambiguous bug description (SSCCE).
3. Your HTML is funky
No formatting The lack of indentation isn't a technical concern (only a nitpick), but makes it hard to read
Inconsistent use of quotes The general practice is to use double quotes " for HTML attributes. For example: <div id="floating_bar">.
**Is that ! supposed to be there in the <script/> tag?
<g:plusone/> is not a valid HTML tag. Were you trying to do something like this?
The CSS is probably not working because the bottom property is set as a percentage. Support for bottom/right was pretty spotty at first, and percentage might be iffy.
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements
I am using rich snippets on my site, I have all of the code for them in the footer so that they are centrally located and easy to access. I do not want the text around these snippets rendered on the page because that info is elsewhere on the site. Is it ok to hide this text by using style="display:none" or will Google ignore the rich snippet entirely because the fields are hidden?
<!-- start rich snippet code -->
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name" style="display:none">My Business Name</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress" style="display:none">123 Example Street, Suite 456</span>
<span itemprop="addressLocality" style="display:none">Major City</span>
<span itemprop="addressRegion" style="display:none">NY</span>
<span itemprop="postalCode" style="display:none">12345</span>
<span itemprop="addressCountry" style="display:none">US</span>
</div>
<span itemprop="telephone" style="display:none">(123) 456-7890</span>
<a itemprop="URL" style="display:none">http://www.mycompanysite.com/</a>
</div>
<!-- end rich snippet code -->
Any info would be much appreciated! Thanks in advance!
As #Diodeus said, ideally you'd have these rich snippets on the actual info that is shown to the user elsewhere on the site. Duplicating it is usually unnecessary.
Yes, Google may well ignore this content based on the display:nones. Can I ask why you're setting it on each element rather than just once on the highest level div?
A way around the display:none potential SEO issue would be to hide it in a different way. For example give the parent div a class of .visuallyhidden and add this to your stylesheet:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
I would like to mention that Google tries heavily (using combination of algorithmic and manual things) to find websites which illegitimately use hidden text.
The typical penalty for that would be a removal from index for 30 days. However, you should not be concerned if you use hidden fields legitimate ways.
There is a very nice article Eric Enge Interviews Google's Matt Cutts regarding Google attitude toward illegitimately use of hidden text.
Have a look at this: https://sites.google.com/site/webmasterhelpforum/en/faq-rich-snippets and search for the word 'tempting'.
' It can be tempting to add all the content relevant for a rich snippet
in one place on the page, mark it up, and then hide the entire block
of text using CSS or other techniques. Don't do this! Mark up the
content where it already exists. Except in special circumstances ... '
It might seem like a clever idea to hide elements in a more complex way than by just display:none but, and i guess the same can be applied for hidden honeypot form fields, you are not the only one who can think of that.
Note: It is as easy to determine if a field is hidden by display:none as it is by margin:0; padding:0; width:1px; height:1px; overflow:hidden or by position:absolute; top:-[a value bigger than the page height]px or by something similar.
People would rich-snippet everything as an Apple product page if it would be ok to hide the snippet and provide any other kind of information on the porn - i mean page.
You got all that information already hanging out on the site, so just add the correct microdata tags to the corresponding text passages and google (other search engines, too by the way) will be happy.
So, for example, if your main page title already exists, put the itemprop="description" tag in the <div> tag thats is wrapping the title and you should be fine.
:)
I can go to facebook and get the code for a "like box". Very handy.
Problem is, the display of this box is lame. it's not consistent. The first article in the 'stream' is displayed with this sort of indentation:
The next article in the stream is displayed with different (lame) indentation.
This is in the same likebox, I merely scrolled down.
The effect is not limited to the stream for "Facebook Platform". I've seen it in the Likebox for other streams as well.
I'd like to style the box, to try to make the indentation consistent, but it appears to be rendered as an iframe, which (I think) means I cannot style it because of the S.O.P.
How can I fix this?
Is there a workaround to display a likebox in a div that is not, eventually, an iframe?
EDIT: bug logged: http://developers.facebook.com/bugs/237053466346453
EDIT: I compared the fb:fan control and the likebox control. With the fb:fan thing, it is possible to provide custom CSS to style the contents. (There are some caveats.) I set the width and margins of the text, and also erased the actorName, which is the same for every post. This is the result:
The left side is produced with this code:
<fb:fan profile_id='19292868552' width='292'
connections='0' show_faces='false' stream='true' header='false'
css='http://example.org/fb/customfanbox.css?_=6392'></fb:fan>
The right side is produced with this:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=false&border_color&stream=true&header=false&height=525"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:525px;"
allowTransparency="true">
For the left-hand-side, if you don't want the fb:fan element, you can use an iframe that points to fan.php, like this:
<iframe src='http://www.facebook.com/plugins/fan.php?connections=0&css=http%3A%2F%2Fexample.org%2Ffb%2Ffb%2Fcustomfanbox.css%3F_%3D0292&id=19292868552&locale=en_US&sdk=joey&stream=true&width=292&height=560'
scrolling="no"
frameborder="0"
style="border-bottom:1px grey solid; overflow:hidden; width:292px; height:525px;"
allowTransparency="true">
You could try using the older fan box plugin which offered loading an external CSS file. I don't know if it still works. If so, it could stop working any moment.
You certainly are not the only one with such problems. I suggest you file a feature request / vote for an existing one.
You cannot style pages form other domains.
That would also make XSS possible.