I got 2 questions.
1) I was wondering if there is any kind of way, an code that I can add in footer for copyrights that will automatically pull Site Name and add into footer copyrights.
Since I bet my English isnt clear enough I will write a example.
If site title is "Example" is there any code that I can add in footer so if I write:
Copyrights 2012 - "it adds title here automatically". All rights reserved.
2) What is the best base64 encoder and can anyone pass me a link of how to use it as well.
I wanted to encode footer so I thought if theres a code to automatically add site title in footer, would be great.
Assuming that you have an element within your footer into which you want the site's title inserted, you can achieve that part quite simply with:
var title = document.getElementsByTagName('title')[0].firstChild.nodeValue,
footerElem = document.getElementById('footerElementID'),
t = document.createTextNode(title);
footerElem.appendChild(t);
JS Fiddle demo.
As for Base64-encoding your footer? I can't offer a way to do that, I'm afraid; nor can I understand why you'd want to.
Edited in response to comment left by OP (see below).
First off, put your JavaScript's <script></script> in the <head></head> of the document. And then paste this in:
window.onload = function(){
var title = document.getElementsByTagName('title')[0].firstChild.nodeValue,
footerElem = document.getElementById('footerElementID'),
t = document.createTextNode(title);
footerElem.appendChild(t);
};
The only difference is that now it's wrapped inside of a window.onload event-handler, which means that it should fire when the window is fully loaded, and, assuming your HTML is accurately reproduced, it should work.
References:
document.createTextNode().
document.getElementById().
document.getElementsByTagName().
node.appendChild().
node.firstChild.
node.nodeValue.
Related
I have a custom theme on Blogger. How do I get the post snippet on the home page to pull certain text in the post instead of pulling from the top?
I tried this in my post
<div class="post-snippet">
<p>This is the section of my post that I want to use as the post snippet.</p>
</div>
Along with this in my theme file below the tag.
<script>
var snippet = document.querySelector('.post-snippet');
var post = document.querySelector('.post');
post.innerHTML = snippet.innerHTML;
</script>
It's not working.
I also tried inserting code next to the below, so as to hide it completely until I can figure this out, but it didn't work either. It did work on a test blog I have using a default Blogger theme, so I think there is some code in the theme that conflicts (or I'm not writing the code correctly).
<data:post.snippet/>
`<style>
.post-snippet {
display: none;
}
</style>`
Instead of the table of contents showing as the post snippet, I put code around "Video games have become a staple in many children's and teenagers' lives, with 76% of children and teens in the U.S. playing video games. While video games can be a fun and entertaining pastime, it's important for parents to understand the potential risks and benefits. Here are some things parents should consider when it comes to video games, children, and teenagers..."
screenshot of homepage
The head tag is not written normally, so I think that's the code that's conflicting or not allowing my new code to work.
<head>
</head><!--<head/>-->```
I'm working on a website to display some details from another website. Specifically I have an element I wish to display. I can get the elements xpath or css path, and I'd like to use this to display the value of the element in HTML box on a unrelated website.
I'm rather new to this so my question is really this basic, I'm sure it's been asked before but I just don't know what search terms to use. I've looked up what I can but I'm unsure if what I have found can be used in a HTML box (I've tried and failed, but I'm unsure if that's an error on my part or the application of the wrong method).
XPath: //*[#id="box2-server-status"]/div[3]/div[1]/div[1]/img
CSS Path:
#box2-server-status > div.box2-content > div:nth-child(4) > div.server-status-indicator > img
Any help/link with guides welcome!
Take a look at this, if that is what can be of help to you..
I got this page..
https://mkdizajn.github.io/my-colors/
and I'm about to pull the title from this page:
http://mkdizajn.github.io/about/
If you open inspector on that page and enter this code in 'console' (of if I got time and add it there in the source ;)
var content;
jQuery.ajax({
url: 'https://mkdizajn.github.io/about/',
success: function(data){
content = data;
var body = jQuery( content ) ;
alert( body.find('h1').text() ) ;
}
})
you will have to get content from second page in the form of alert.. .. take a note that page is from that same domain, that is very important
https://mkdizajn.github.io/my-colors/
hth, k
I have a code that is formatted like this:
<div id = "test" class = "invisible">
<!--I want to hide this!-->
%%GLOBAL_ProductDescription%%
</div>
<script type = "text/javascript">
//Takes the info within the div above and manipulates some information
var desc = $('#test').html();
//Put edits to new_desc
$(document).ready(function() {
document.getElementById("info").innerHTML = new_desc;
});
</script>
<div class = "stuff" id = "product">
<a id = "info"><!--receive info from script here--></a>
</div>
The code works properly in terms of the last div displaying the information and formatting that I want to have. The problem now is: the page is displaying the original information plus the edited one in the bottom. Whenever I try to hide the first div, everything else goes away!
I would manipulate the data by just assigning the contents of the global variable into my Javascript variable but that it sort of out of the picture right now. Can anybody tell me what I am doing wrong and why hiding this one div completely gets rid of all the other information in the page?
Note: When I type some gibberish at the beginning of the code, it shows even though there's a display:none. If I put it anywhere below that line, it does not show either.
The content changes per product. There may have been some divs in there that weren't closed properly and that's why it's pushing the latter part of the code somewhere inside %%GLOBAL_ProductDesc%%. I did not know it could behave like that so I overlooked that part in my check.
I can't really go ahead and bulk edit about 4000 products such that the HTML in there is correct so I inserted 4 s before the start of the script and everything looks good. I know this may not be the most robust answer to the question but it works for now. Thanks for all the help!
I'm trying to on page load get my html table to load at a specific column, I wouldn't even know where to start with this.
I've uploaded it here to see a demo: http://jsfiddle.net/3EFqD/
I've tried this in my body tag:
onload=' location.href="#right_column" '
and added id='right_column' to the correct td but that didn't work
Trying to get it to load on the cell that is labeled "this one"
Here's a fiddle incorporating the width of the header: Fiddle
Again, a jquery solution, essentially the same as above but needs to subtract the header width to hit the right position. See the fiddle for where the id's are added
$(document).ready(function(){
var hw = $('#headerWidth').width();
var f = $('#scrollToMe').position().left - hw;
$('.inner').scrollLeft(f);
})
If Im right in thinking you want a specific column to be scrolled to on page load, the easiest way would be to use a library, e.g. jQuery:
$('.inner').stop().animate({
scrollLeft: $('#right_column').offset().left
}, 1000);
Demo Fiddle
You're trying to make it work in a similar way to using anchors- however this isnt possible for horizontally aligned content.
May be if you are trying to load some html code(like table) in the mentioned td(This one), as you mentioned add id=right_column to this td and then use the below jquery logic -
var newtable = '<table class="newtable">New table, this may be from ajax call also</table>'
$('#right_column').html(newtable);
In a SPA, using a navigation framework such as Sammy.js, how could I use in page named anchors for in-page navigation?
e.g. Say I have a route like localhost/myapp/#/somerecord/1 where the application loads somerecord with id = 1.
However somerecord is really complicated and long. I want to be able to jump to a certain section using a named anchor.
Say an article element is defined like <article id=section-d> ... </article> and I just link to like <a href=#section-d>Section D</a> it technically works, but the URL reads like localhost/myapp/#section-d, this breaks the navigation stack. Hitting the Back button takes me back to localhost/myapp/#/somerecord/1 and without jumping back to the top.
The preferred action would be to either jump back to the top or to the previous page. Any ideas on how to accomplish this?
Effectively, you have to define your URL as a regular expression, and allow an optional bookmark hash at the end of it; something like:
get(/#\/somerecord\/(\d+)(#.+)?/, function() {
var args = this.params['splat'];
var recordId = args[0];
var articleId = args[1];
});
This should match any of the following routes:
#/somerecord/1
#/somerecord/1# (treated as if there is no article id)
#/somerecord/1#section-d (articleId = '#section-d')
You should then be able to use the articleId to find the matching element and manually scroll. e.g. in the last route above, using jQuery you could do something like:
var $article = $(articleId);
$(document.body).animate({ scrollTop: $article.offset().top });
});
I've just written up a more comprehensive article about this (using Durandal), if you're interested: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/
Edit
Link is dead. The article available here http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/
I've had the same problem using durandal with sammy.js. Basically, you have to create a (invisible) route for each anchor you want on your page. See a post from me about the solution I found: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html