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;
}
Related
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.
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!
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb
I wish to provide a quick demo about the contents of my website and how to use them in a proper way as soon as a user visits my page. I wish to give the demo using a popup type window at the top.
I mean small information boxes informing user about the various steps one by one. Can anyone help me how to do this?
Look at the jQuery UI dialog, it's fully customisable, or consider using some sort of tool tip idea, when you mouse over a part of the page feedback to the user what the section in question is for (via hovering mouse overs etc).
One simple way to do this is with javascript.
Try this
<script type="text/javascript">
alert("Hello world!");
</script>
visit this page for more information.
know this question is old but try intro.js
include js/css
<link rel="stylesheet" href="css/introjs.min.css">
<script type="text/javascript" src="jquery/intro.min.js"></script>
then on each item you want to show tutorial add the following
data-step="1" data-intro="Enter tip text"
<div class="span6" data-step="1" data-intro="Click here for help">
<div class="span6" data-step="2" data-intro="Click here for home page">
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