I've looked everywhere and can't seem to find the code. Hopefully one of you can help!
I have a YouTube-subscribe button on my site and it's has a trouble. In microsoft edge, IE and all browsers it looks like the first link below but only in Chrome I see button correctly. (the second link below)
Here's a code of my button:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="NAME" data-channelid="ID" data-layout="full" data-count="default"></div>
http://i.imgur.com/7OfkESu.png
http://i.imgur.com/fR1UWkN.png
p.s sorry for my bad english.
Related
I've looked all over the place for an fix for this but I can't seem to find it!
I've made my own old browser alert using Twitter Bootstrap's alert class with a black overlay on the content under the alert, it looks great, but I want a hyperlink in the alert that takes the user off to http://browsehappy.com/ where they can then update their browser. But the hyperlink doesn't do anything in IE - it works in everything else (even IE7!) but in IE8 it just shows up blue and isn't clickable.
I've made a JSFiddle with conditional comments in it so you can see what I'm doing:
http://jsfiddle.net/X3tKs/2/
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="black" style="width:100%;height:100%;background-color:black;opacity:0.8;filter:alpha(opacity=80);position:absolute;top:52px;z-index:3000;"></div>
<div class="alert alert-danger">
Yikes! You're using an old browser! This page might not work the way it should. Time to update!
</div>
Any help will be MUCH appreciated!
UPDATE:
Turns out it was just my fault for using an online browser simulator! Thank you #joshhunt for your comment regarding this - I sent the link to my friend who has a windows computer and they confirmed it was working, it was actually Browserstack that wasn't working right. I tried taking everything out - bootstrap styling, black div (thanks #OJay) and it still didn't work, so I figured it couldn't have been my code. Time to invest in an old Windows laptop for testing! :)
HTML
<div class="alert alert-danger">
Yikes! You're using an old browser! This page might not work the way it should. Time to update!
</div>
jQuery
$("#update_link").click(function(){
var url = "http://browsehappy.com";
window.open(url, '_blank');
});
CSS
#update_link{
cursor:pointer;
}
All day long I am trying to find the source of the following problem.
I am using this HTML:
<div class="sharebox">
<a class="shlink tooltipS" title="trumpa nuoroda į šį puslapį" href="http://www.klaustukai.lt/5"></a>
<a class="shprint tooltipS" title="spausdinti" href="javascript:window.print();"></a>
<a class="shfb tooltipS" title="dalintis Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shgp tooltipS" title="dalintis Google+" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shtw tooltipS" title="dalintis Twitter" href="https://www.twitter.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
</div>
with this CSS:
.shlink, .shprint, .shfb, .shgp, .shtw {
position:absolute;
display:inline-block;
background:url(http://www.klaustukai.lt/qa-theme/kt/elements.png) no-repeat 0 0;
border:0;
height:16px;
width:16px;
}
.shlink {background-position:-2px -250px;left:4px;top:5px;}
.shprint {background-position:-22px -250px;left:27px;top:5px;}
.shfb {background-position:-40px -250px;left:50px;top:5px;}
.shgp {background-position:-58px -250px;left:73px;top:5px;}
.shtw {background-position:-76px -250px;left:96px;top:5px;}
.shlinktxt {display:block;width:115px;margin-top:30px;}
.shlinktxt input {font-size:10px;color:#555;width:100%;}
where elements.png holds the graphics for the background. Nothing special, nothing fancy. And works for years in all browsers.
The weird thing: When I do a test in a separate test.html it works fine, even in Firefox 27.0.1. But having the exact same code in this forum: klaustukai.lt will not show the google plus button class .shgp.
This happenend after the last update of Firefox to version 27.0.1. Before it worked! This is why I think it might be a Firefox bug. In Chrome and Internet Explorer displaying the button works as expected:
Firefox 27.0.1
What I see from the Firefox developer tool Box Model is that the .shgp element has height:0 and width:0 - it also seems to have lost position, the indicator shows it now top left on the website.
I also tried to reposition the sharebox, I disabled javascript, same problem, it is always the .shgp anchor that fails.
When testing, I realized that if I save the HTML page locally and load it again in the browser, the button is displayed correctly. Even more confusing.
This is such a weird issue for me. Who knows what is causing this behaviour? And how can the .shgp anchor be displayed correctly?
Your help is very much appreciated.
Found the source of the problem!
The culprit has been the Addon Adblock Plus that is blocking the google plus anchor!
If you disable the addon the button appears.
Cannot believe... but now everything gets more clear. I installed Adblock Plus on Chrome and the button disappeared as well. Good to know that it is not a Firefox bug.
Good evening everyone, I have a serious issue with SWIPEBOX galleries and Google chrome mobile.
Now please let me state that I am a total beginner in jquery and javascript and don't know what I am doing.
I am trying to create 5 separate galleries on the same page. I followed the vague steps on the swipebox website and gave each class its own unique name
class="swipebox1", class="swipebox2", class="swipebox3" (kept it simple).
eg.
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox1" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
<div class="box">
<a href="example/assets/full/leap.jpg" class="swipebox2" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
The problem is that Google Chrome mobile only allows touch/tap on the buttons (close, next, previous) in the first gallery.. The second and third galleries, you can only swipe (none of the buttons work)... So you cant close... :(
I have tested this on all other browsers and it works fine (webkit mobile, dolphin mobile, safari pc, safari mac, IE10 pc, Opera pc, Nightly pc)... I have not made any changes to the swipebox css or js files... (wouldn't know what to change anyway)
Also, my script is:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox1").swipebox();
$(".swipebox2").swipebox();
$(".swipebox3").swipebox();
});
</script>
I hope this is right!!!
I also tried:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox1, .swipebox2, .swipebox3").swipebox();
});
</script>
but that just added them together, which I didn't want...
I really need someone's help on this as I am almost finished with my responsive website and this is the only thing holding me back...
thanks in advance for any help you can provide.
Try to leave class as "swipebox", I mean like this:
class="swipebox"
everywhere for each of your 3 galleries.
To run Swipebox use "rel" attribute like this:
<div class="box">
<a rel="gallery-1" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
<div class="box">
<a rel="gallery-2" href="example/assets/full/leap.jpg" class="swipebox" title="Leap">
<img src="example/assets/leap_thumb.jpg" alt="leap"></a>
</div>
Let us know if that works!
Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.
I got the following webpage-builtup:
<div id="menu">
</div>
<div id="content">
<!-- you just need to see the last part of the page? us this link -->
down
<!-- A LOT OF CONTENT ... no fun to scroll down -->
<!-- EVEN MORE CONTENT ... still no fun to scroll down -->
<a name="down" id="down" />
</div>
This works fine except Opera. Why is that? Does someone know a solution or am I doing something wrong?
There's nothing wrong with the code. Except maybe for the fact that you're trying to self-close a tag that isn't a self-closer. In this case, the anchor tag. Close it properly at least.
But, tested in Opera 9.64 and it's working fine.
The expected outcome of that code chunk alone is to go right down to the named link, which it does.
If you have a clashing ID that you're not showing, that's probably a reason.
Tested and working in Opera 10.0 on Windows Vista.
You must have some other problem, like a duplicate name or id, that Opera handles differently from other browsers.
Have you tried validating your HTML?
Does not work in Opera 9.5.1 as thats what I'm using and how I found the same question. Might be a bug for that version of Opera