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">
Related
The following code has been added to my webpage and should render the live CodePen image, but instead it shows displays a link:
<p>Fitness app</p>
<div class="w3-half w3-grayscale-max">
<p data-height="364" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen Fitness app by seyi (#seyicole) on CodePen.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
Any ideas about why the CodePen isn't fully rendering? Thanks!
The CSS you'll also need to convert. Its in SCSS, not plain CSS. Luckily Codepen has options to view compiled HTML and CSS in the little arrow dropdowns so that helps. The other bit missing is, you are going to have to hook it up with some actual programming logic to make the animation advance with the steps.
On your CodePen page, click the Embed button in the lower right corner. From there you can select how you want the pen to display as it's embedded on your webpage. Then select the Copy & Paste Code.
It looks like the snippet in your question doesn't have the necessary data attributes:
<p data-height="265" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="js,result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen Fitness app by seyi (#seyicole) on CodePen.</p>
You can read more about embedding pens on CodePen's blog.
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;
}
I am trying to put a picture underneath my Google adsense ads on my website but I cant get it to work. It could be that I suck with CSS but I was wondering if anyone knew how to put a picture under it. I am doing this so if someone has ad blocker there will be the picture there instead saying ads support us please disable your adblocker. Here is the code for my test ad.
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9190588463236669";
/* herp */
google_ad_slot = "8389049989";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I take it you mean hidden underneath the Google AdSense block so that the user only sees it if no AdSense ads are allowed to run?
I can't think of any way you could do that using HTML and CSS. Instead you could try using a noscript element to tell your web page how to render if the AdSense JavaScript block cannot be executed because scripts are disabled.
For example:
<script type="text/javascript">
<!-- AdSense code goes here as normal -->
</script>
<noscript>
<img src="images/ads-support-this-site.jpg" width="750" height="75" alt="Ads support this site. Please do not use plugins to disable ads." />
</noscript>
This should allow you to show a chosen JPEG image (and/or other HTML markup) if the script block does not run.
See the HTML5 noscript element definition on the W3 site for more details.
I haven't read the Google AdSense terms and conditions for a long time, and Google have always been fussy about changes made to their code. So you might want to contact Google and check with them that a noscript block is permitted by their terms and conditions, to avoid upsetting them and being kicked from the programme.
Can anyone shed some light to this situation: I have a link that opens in a modal, i add a link and a button that are set to go to the same url. If i click the link, the modal goes to the link, and shows the article properly. If i click the button, it shows the article embedded on the page.
Here's the url, click on newtest2
http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=category&id=1&Itemid=2
Here's the code
<head>
<script type="text/javascript">
function change_url(){
window.location.href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2"
}
</script>
next
</head>
<body>
<button onclick="location.href='http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2'">Next</button>
</body>
</html>
There is a apparent difference, being that the link calls window.location, while the button just sets location, but this is semantically the same.
That popup you got is created by JavaScript. So the link is just used for its url, but when you click it, a script gets executed that loads the content asynchronously and shows it in a popup.
This script does not affect the button (though it could). Find the script that does this and apply it to the button too.
A workaround could be:
<a href="http://zaazoolive.thewebbusters.com/index.php?option=com_content&view=article&id=1:newtest&catid=1:test&Itemid=2">
<button></button>
</a>
Edit: Although it's working, is not a recommended code, as HTML spec clearly says that using tag for item is invalid, so treat this ONLY as a workaround.
P.S. Why are you using <a></a> in section head?
In another question, "Using Google Map with ColdFusion", I ran into a problem of not able to display a google map using CF. After much experimenting, I found out that if you use ColdFusion.navigate to point to a page from one cflayoutarea to another cflayoutarea, the map in the destination cflayoutarea would not show. (However, if you just run the page, both by itself or when it is inside the destination cflayoutarea, the map will show)
So my question now is: is there an alternative approach where I don't need to use coldfusion.navigate to navigate from one cflayoutarea to another?
Your English isn't great, so I'm going to paraphrase to a question that makes sense (to me) and answer that question...
It sounds like you have 2 CFLayoutArea's, and you want to have a link (or button, etc) in one of them that will change the contents of the other.
If you're eliminating ColdFusion.navigate as an option, then it seems to me you're going to have to try one of a few other options that are all basically the same thing. I like jQuery. If you don't like jQuery, you can use another library, or roll your own solution, but they will all do the same job.
Since this code:
<cflayout name="foo" type="hbox">
<cflayoutarea name="nav">nav</cflayoutarea>
<cflayoutarea name="content">content</cflayoutarea>
</cflayout>
Produces this HTML:
<div id="foo">
<div id="nav" style="overflow:auto;float:left;">
nav
</div>
<div id="content" style="overflow:auto;float:left;">
content
</div>
</div>
You can use the ID attribute of the content DIV, with jQuery, to change its contents:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#goLink").click(function(e){
$("#content").load("content.cfm");
e.preventDefault();
});
});
</script>
<cflayout name="foo" type="hbox">
<cflayoutarea name="nav">go</cflayoutarea>
<cflayoutarea name="content">content</cflayoutarea>
</cflayout>