I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.
I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.
Here's the code I have, which successfully does not show the div on permalink pages:
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
This will work:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
This is displayed only on the index page.
</div>
{/block:IndexPage}
More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization
I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.
<div id="splashbox" style="display:none">
This is the content I wanted to show on the post pages only.
</div>
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (self.location.href.indexOf("post") > -1 ) {
document.getElementById('splashbox').style.display='block';
}
}
</script>
You can also do it just with CSS.
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
display:none will hide it but thats, a hidden element can still mess with your layout.
We could use the comment code* to turn the div into a comment that wont mess with anything.
*<!-- comment -->
ex.
{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}
<div style="width:400px; heigth:200px">
blah blah
</div>
{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
<div id="splashbox" class="mid2" style="display:none">
Followed by this script:
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
//alert('location match, show the block');
document.getElementById('splashbox').style.display='block';
}
}
</script>
This is solved by using div:not() operator.
The HTML Markup will be
{block:IndexPage}
<div id="banner">
<div class="banner_{CurrentPage}">
This Content will appear in only on home page
</div>
</div>
{/block:IndexPage}
Now add this CSS to
#banner div:not(.banner_1)
{
display:none;
}
{block:SearchPage}
#banner
{
display:none;
}
{/block:SearchPage}
{block:TagPage}
#banner
{
display:none;
}
{/block:TagPage}
The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.
Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
Alternatively, you can use this tag: {block:HomePage}.
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
References:
https://www.tumblr.com/docs/fr/custom_themes
Related
Im building shop on woocommerce and im trying to make spoiler under product with short description on archive page.
But unfortunetely it works only with first product.
I made changes inside content-product.php
<div class="tog-holder" id="tog">
<div class="bar horizontal"></div>
<div class="bar vertical"></div>
</div>
<div id="anim">
<p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
</div>
Here is a css:
<style type="text/css">
/* plus sign */
#anim{display:none}
.bar{transition:all .2s ease-in-out}
#tog.animate .bar{-webkit-transform: rotate(45deg)}
.tog-holder{position:relative;width:32px;height:32px;padding:15px 0}
.bar{position:absolute;background-color:#000;}
.horizontal {width:32px;height:2px;left:0;top:15px;}
.vertical {width:2px;height:32px;left:15px;top:0}
</style>
And Jquery
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#tog").click(function() {
jQuery("#tog").toggleClass("animate");
jQuery("#anim").slideToggle(800);
});
});
</script>
I think problem is with Jquery. I dont know it very well. I put script and css to to header with Insert Headers and Footers plugin it works like below on the screenshot.
Thanks in advance!
IDs are unique identifiers and should only be existing once on a page.
Your jQuery script is getting the id "tog" and uses the click function. You are only do this for the first element with this id.
You should use a class instead and could use a for each to add this click function to all elements with this class.
Another method would be to add the on click to the html tag
<div onclick="yourFunction()"></div>
and create a function where you are referencing to "this" to always use THIS element which is clicked.
EDIT: Here is an example code for you, to make things clearer
<script>
jQuery(document).ready(function(){
jQuery(".class_of_your_hidden_description").hide();
jQuery(".class_of_your_element_to_be_clicked").click(function(){
jQuery(this).next(".class_of_your_hidden_description").slideToggle();
});
});
</script>
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
I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '#media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.
The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}
This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.
I have just started using javascript so any help would be much appreciated.
Thanks.
The CSS way
#media print
Use #media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.
Edit: You can hide any element, such as header this way:
header
{
display:none;
}
footer
{
display:none;
}
The Javascript way
Button's onClick
Your button's onclick:
Button onClick()
<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"
Your javascript code in the header (or at the end of the page)
Javascript
function printPage()
{
var myDropDown = document.getElementById('myDropDown');
myDropDown.style.display = "none";
//Whatever other elements to hide.
window.print();
myDropDown.style.display = "block";
return true;
}
You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.
Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.
The CSS:
#media print {
#myHeader, #myFooter { display: none }
}
The HTML:
<div id="myHeader">
<ul>
<li>
<a>My link</a>
</li>
</ul>
</div>
<div id="myContent">
<p>This will print fine</p>
</div>
<div id="myFooter">
<p>This will not print</p>
</div>
You could always use HTML5 header/footer elements!
Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?
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).
Hi i hope someone can help. i want to hide the fragment identifier from the address bar so instead of:
www.mydomain.com/example.html#something
i just get:
www.mydomain.com/example.html
when i click on an anchor tag.
I have looked at lots of related questions and forums but still can't quite figure it out. I'm pretty sure i should be using something along the lines of:
window.location.href.replace(/#.*/,''); //and or .hash
put just cannot figure it out.
localScroll plugin allows you to hide or keep the identifiers and by default they are hidden. i think many gallery plugins have a similar option too.
but when i try and do it myself (bit of a novice) i get crazy to no results.
below is some basic example script i would like it to work with:
<style>
.wrap{
width:300px;
height:200px;
margin:auto;
}
.box{
width:300px;
height:200px;
position:absolute;
display:none;
}
#one{background:red;}
#two{background:blue;}
#three{background:green;}
.load{display:block;}
</style>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="wrap">
<div id="one" class="box load">This is Box 1</div>
<div id="two" class="box">This is Box 2</div>
<div id="three" class="box">This is Box 3</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("ul li a").click(function(){
$("div.box").fadeOut(1000);
$($(this).attr('href')).fadeIn(1000);
});
});
</script>
</body>
Add
return false;
at the end of your click function, it will stop this event propagation
the replace function returns a new string, it doesn't operate on the old one. You need to use: window.location.href = window.location.href.replace(/#.*/,'').
However, this will not have the expected effect, as changing window.location.href in any way that's not just adding or changing a hash tag causes a page reload.
The localScroll plugin works by searching for the hashtag and using the jQuery scrollTo plugin to scroll to the location, and preventing the default behavior of the browser when you click on a link with a hash tag. They haven't actually changed the URL to remove the hash, they've prevented it from ever appearing.
The best you can do if you want to remove the hash from the URI is to keep just the # at the end:
window.location.href = window.location.href.replace(/#.*/,'#');
Although in some older browsers, even this will trigger a page reload (only very old browsers, though).
try this....it will remove # globally in your url
window.location.href.replace(/\#*/g, "")
here is DEMO