I run a site at http://chasemccoy.net/, and on the desktop I serve an advertisement in the sidebar. This comes from some given JS code from the ad network.
The site loads a custom layout when viewed on an iPhone. I need to place that ad into the footer of the site when it's displayed on a mobile device. I am using media queries to change the mobile layout.
My initial solution was to add the JS to the footer, and just use display: none; on the desktop version. However, the JS will not load into the site twice. I basically news a way to prevent the JS from loading at all on the mobile version until it hits the footer code.
Any easy fix for this? I am not a JS wiz by any means. Thanks for your help.
Edit: Here is the JS for the ad:
<script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>
That is simply pasted into the place in the HTML where I would like it to appear. The only problem is that the browser will not load more than one instance of the code.
Edit: Here is an outline for the sidebar.
div id="sidebar">
<div class="gravatar">
<img alt src="avatar.png" class="avatar avatar-100 photo" height="100" width="100">
</div>
<ul>
<li>Start Here</li>
<li>Colophon</li>
<li>Archive</li>
<li>RSS</li>
</ul>
<!-- Yoggrt.com Zone Code -->
<script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>
<!-- End Yoggrt.com Zone Code -->
</div> <!-- Sidebar -->
Just copy the HTML codes. Not JS codes. And use your same display: none; method.
I mean use the HTML codes twice. But don't use the JS codes twice.
You have a few choices. One would be to create the script nodes dynamically. In your sidebar you need a script node with something like this (not tested):
if( ! navigator.userAgent.match(/iPhone/i)) {
var aScripts = document.getElementsByTagName('script'),
elContainer = aScripts[aScripts.length - 1].parentNode,
elScript = document.createElement("script");
elScript.type = "text/javascript";
elScript.src = "http://chasemccoy.net/wp-content/themes/lessismoresidebar/js/retina-1.1.0.js"
elContainer.appendChild(js);
}
More here.
Related
I have a banner in a div and I like to place it on home page which automatically reflects on rest of the pages?? Is it possible ?? without placing the code on the each page specifically ??.
Any help would be appreciate :)
If you're using PHP, you can write the whole banner in html, then save it as .php (e.g. banner.php). Then somewhere before the content of each of your pages, use PHP's include
keyword
For each of your page you can write it this way:
<body>
<div id='banner'>
<?php include "/path/to/banner.php"; ?>
</div>
<div id='content'>
<!-- Main content here -->
</div>
</body>
Either this can happen with php as #javiniar-leonard recommends, or you can use css.
In every page the basic structure is the same I guess. So target the div and place the div as background:
.main{
background:url("../your_banner_url.jpg");
}
I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML
Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.
I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.
So as you can see it's focused on retro, vintage, ribbons and scetch elements.
Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.
I never did much with js or actually ajax.
I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.
The content which needs to be changed is placed in
<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
<li class="ribbon-content">Link</li>
<!--
?content=blog
?content=portfolio
?content=lebenslauf
?content=kontakt
-->
</ul>
(...)
</nav>
<section id="content">
<div class="con clearfix">
(...)
</div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>
http://robert-richter.com/boilerplate/
for example use jquery.
first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$(".ribbon-content a").on("click", function(event){
event.preventDefault();
$(".con").load($(event.target).attr("href"), function(){
// add code after loading - for example change classes of menue
})
});
})
</script>
additionly you can the the browser-history to enable the prev- and next-buttons of the browser.
Rather than trying to create tons of different pages on my website, I'm trying to update the content of a single div when different items in the navbar are click to update the maint div content. I tried to find a simple example using Javascript:
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
<div id="example1div" style="border-style:solid; padding:10px; text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )">
Click me to replace the content in the container.
</a>
This works just fine when I only try and update text, but when I put an img tag in there, as you can see, it stops working.
Either
1) what is the problem with how I am trying to do it?
or 2) What is a better/easier way to do it?
I'm not stuck on Javascript. jQuery would work too, as long as it is just as simple or easy. I want to create a function that will just let me pass in whatever HTML I want to update and insert it into the div tag and take out the 'old' HTML.
You just have some escaping issues:
ReplaceContentInContainer('example1div', '<img src='2.jpg'>')
^ ^
The inner ' need to be escaped, otherwise the JS engine will see ReplaceContentInContainer('example1div', '<img src=' plus some syntax errors resulting from the subsequent 2.jpg'>'). Change the call to (tip of the hat to cHao' answer concerning escaping the < and > in the HTML):
ReplaceContentInContainer('example1div', '<img src=\'2.jpg\'>')
A simple way to do this with jQuery would be to add an ID to your link (say, "idOfA"), then use the html() function (this is more cross-platform than using innerHTML):
<script type="text/javascript">
$('#idOfA').click(function() {
$('#example1div').html('<img src="2.jpg">');
});
</script>
First of all, don't put complex JavaScript code in href attributes. It's hard to read or to maintain. Use the <script> tag or put your JavaScript code in a separate file altogether.
Second, use jQuery. JavaScript is a strange beast: the principles underlying its patterns were not designed with modern-day web development in mind. jQuery gives you lots of power without miring you in JavaScript's oddities.
Third, if your goal is to avoid having to endlessly duplicate the same basic structure for all (or many) of your pages, consider using a templating system. Templating systems allow you to plug in specific content into scaffolds containing the common elements of your site. If it sounds complicated, it's because I haven't explained it well. Google it and you'll find lots of great resources.
Relying on JavaScript for navigation means your site won't be indexed properly by search engines and will be completely unusable to someone with JavaScript turned off. It is increasingly common--and acceptable--to rely on JavaScript for basic functionality. But your site should, at minimum, provide discrete pages with sensible and durable URLs.
Now, all that said, let's get to your question. Here's one way of implementing it in jQuery. It's not the snazziest, tightest implementation, but I tried to make something very readable:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<style type="text/css" media="all">
/* all content divs should be hidden initially */
.content {
display: none;
}
/* make the navigation bar stand out a little */
#nav {
background: yellow;
padding: 10px;
}
</style>
</head>
<body>
<!-- navigation bar -->
<span id="nav">
about me |
copyright notice |
a story
</span>
<!-- content divs -->
<div class="content" id="about_me">
<p>I'm a <strong>web developer</strong>!</p>
</div>
<div class="content" id="copyright">
<p>This site is in the public domain.</p>
<p>You can do whatever you want with it!</p>
</div>
<div class="content" id="my_story">
<p>Once upon a time...</p>
</div>
<!-- jquery code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
// Wait for the document to load
$(document).ready(function() {
// When one of our nav links is clicked on,
$('#nav a').click(function(e) {
div_to_activate = $(this).attr('href'); // Store its target
$('.content:visible').hide(); // Hide any visible div with the class "content"
$(div_to_activate).show(); // Show the target div
});
});
</script>
</body>
</html>
Ok, hope this helps! If jQuery looks attractive, consider starting with this tutorial.
Your main problem with your example (besides that innerHTML is not always supported) is that < and > can easily break HTML if they're not escaped. Use < and > instead. (Don't worry, they'll be decoded before the JS sees them.) You can use the same trick with quotes (use " instead of " to get around quote issues).
I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.
What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?
Here's my code:
<div id="tabs">
<div id="overview">
<a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
</iframe>
</div>
The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.
Ajax with JQuery (use this and you will be loved on SO; the AJAX functions are great and simple)
Ajax with Prototype
Ajax with MooTools
Standalone Ajax with Matt Kruse's AJAX toolbox (Used to use this, using JQuery today because I needed a framework)
AJAX with Dojo (Said to be fast, but AJAX is not as straightforward)
Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.
Maybe the jQuery UI Tab might be helpful here if you like to try it.
EDIT: AJAX example with UI Tabs.
First, the HTML will look like this.
<div id="tabs">
<ul>
<li><span>Overviews</span></li>
<li><span>Gallery</span></li>
<li><span>Reviews</span></li>
</ul>
</div>
Then make sure that you import the appropriate jQuery files:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
etc...
Then add the code to create the tabs:
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
There's an alternative to AJAX!
You can load ALL three possible contents into separate DIVs.
Then clicking on a tab will simply make the display attribute of the appropriate content's DIV "block" while making the other two DIVs' display property "none".
Cheap, easy, does not require AJAX costs for extra http request or for coding.
Mind you, AJAX is a better solution if the contents of the tabs will change dynamically based on other data as opposed to being known at the time the page loads.
You don't need script.
<ul><li>foo link<li>bar link</ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>
Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).
If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.
It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.
If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>
You would then need to add the following CSS to the BODY element using:
BODY { Background: transparent; }
The HTML iframe is to be used to include/display non-template content, such as a PDF file. It's considered bad practice when used for template content (i.e. HTML), in both the SEO and UX opinions.
In your case you just want to have a tabbed panel. This can be solved in several ways:
Have a bunch of links as tabs and a bunch of div's as tab contents. Initially only show the first tab content and hide all others using CSS display: none;. Use JavaScript to toggle between tabs by setting CSS display: block; (show) and display: none; (hide) on the tab content divs accordingly.
Have a bunch of links as tabs and one div as tab contents. Use Ajax to get the tab content asynchronously and use JavaScript to replace the current tab contents with the new content.
Have a bunch of links as tabs and one div as tab contents. Let each link send a different GET request parameter or pathinfo representing the clicked tab. Use server-side flow-control (PHP's if(), or JSP's <c:if>, etc) or include capabilities (PHP's include(), or JSP's <jsp:include>, etc) to include the desired tab content depending on the parameter/pathinfo.
When going for the JavaScript based approach, I can warmly recommend to adopt jQuery for this.
This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript">
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)
As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.
http://docs.jquery.com/Ajax/jQuery.get
Something along these lines:
$.get("toframe.html", function(data){
$("#tabs-1").html(data);
});
edit..
you could prepopulate or onclick you could do the get dynamically
$("#tabs a").click(function(){
var pagetoget = $(this).attr("href");
$.get...
})
If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.
The get is less code though, easier time.