Putting social buttons on all webpages using 1 single code - javascript

jsfidllde
I am trying to get the lazy load effect of social buttons through socialite.js. Everything is fine, but the +1s, likes, tweet counter is for socialite.com and not my website. For example, this code gives socialite.com a "like":
<li>
<a href="http://www.facebook.com/sharer.php?u=http://www.socialitejs.com&t=Socialite.js"
class="socialite facebook-like" data-href="http://socialitejs.com" data-send="false"
data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow"
target="_blank"><span class="vhidden">Share on Facebook</span></a>
</li>
I want it to be for my page. Manually changing http://socialitejs.com to mywebsite.com for each and every different page is too tiresome.
I believe there is a trick to do this with javascript and replacing href with expr:share_url='data:post.url', however this is not working as the code has many other attributes apart from href. Can anyone help me please. Thanks a ton.

When you add the element in which you'll invoke socialite.js:
<a class="socialite twitter-share" href="http://twitter.com/share" data-url="http://socialitejs.com">
Share on Twitter
</a>
You're supposed to replace the value at data-url for your website URL. Then the generated elements will point to your website.
If you, by mistake, already included the wrong URL in many places - and feel it's easier to correct it with JavaScript instead of doing search-and-replace in a bunch of files - then I suggest running this jQuery line before calling Socialite.load():
$('[data-url]').attr('data-url', 'mywebsite.com');

Related

Link to tab from different page

We are working on a Bootstrap website to present our schoolwork. I have a fair understanding of the used html code, but I am having one problem.
To link to a specific tab/section within a page this link is used:
href="#tab"
I have copied the original index.html and thus created a second webpage. I'm able to link to this page using:
href="page2.html"
But I'm not able to link directly to a tab/section on that second page. I tried using href="page2.html/#tab" or "page2.html#tab" etc. But it doesn't work yet, I think I miss some fundamental knowledge about this coding.
Could anyone explain me how to get this working, in 'normal' language. There are several (older) solutions, but can't get them to work in the javascript files.
This should help...
http://codepen.io/mattsince87/pen/exByn
LINK -> <a id="link1" class="nav-section1" href="#section1">S1. Info</a>
Content -> <h1 id="section1">1. Info</h1>
You can use something like this as i have this thing running in my project. these will check the page if it contains the tabs then it will take the last value from the url of the page2 and will make it visible.
if($("#tabs").length)
{
var id = window.location.hash.substr(1);
$('#tabs a[href="#'+id+'"]').tab('show');
}

multi language using javascript

I have 3 different languages in my website. I would like to create 3 buttons for changing relative language:
Clicking Eng will direct to /en/index.html
Clicking Chinese will direct to /../chi/index.html
Clicking japan will direct to /../jp/index.html
<a class="changeLang" href="chi">CHI</a>
<a class="changeLang" href="eng">ENG</a>
<a class="changeLang" href="jp">JP</a>
Is it any simple javascript to change the page? Thanks a lot.
You can't get informations from your previous Javascript page..
When you reload it, your variables are deleted.
If you want to get information and use it between pages, you can use $_SESSION or $_COOKIE from PHP.
Take a look here.
Good luck !

a href external link to specific area on page

So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.
I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?
I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.
CODE:
HTML
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>CHARTERS</li>
</ul>
</nav>
if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:
TOURS,PRICES & STANDARD FLIGHTS
You can use:
<a id="different_section_1">Different Section</a>
in the target page and in the navbar use:
Page
But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.
As "user3472089" said you can point the a certain element through its id.
I use this at the top of my gallery:
And at the bottom I just put a link or a simulated button that leads to that anchor:
<a href="#top">
<div id="top_anchor">
UP
</div>
</a>

Sitemap generator for popup window javascript

On my HTML index page, I am using a popup javascript code that has something like
<li> <font color ="#000"> » </font> <font color ="#ccc">
Some text</font><b>, XYX, Country</b></li>
<li><font color ="#000"> » </font><a href ="secondpage.php" alt="Blog" />
I used a free xml-sitemap generator and strangely, the second li which is a regular a href URL and shows up in the sitemap as a linked page. However, the first one which calls the page using a javascript function does not show up.
This got me thinking,
Would this impact SEO results, would search engines also skip JS code and hence not crawl the linked pages which open in a popup?
Or is this an issue with the sitemap generator that does not understand JS and I have to manually create it?
Totally new to this. Was hoping to get some advise .
thanks!
Ryan
answer will vary based of crawlers, but you should keep your markup readable and less dynamic in areas you want crawler to read or you can follow the guidelines provided. For specific answer to your question:
Since 2009 Google looks for and finds OnClick links in any and all HTML tags. When found they will add the URL to their crawl.
If there is sensible "anchor" text then the text of the element will be used as anchor text.
The OnClick link also passes PageRank.
For more info:
http://www.searchenginepeople.com/blog/onclick.html
http://seogadget.com/google-does-not-crawl-hidden-java-onclick/

Slideshow href not working

I am using http://www.dhtmlgoodies.com/?whichScript=inline_slideshow jquery script
I want to give different different link in every images.
Looks like
<div class="imageSlideshowHolder" id="slideshow1">
<a href="http://www.learnphp.in">
<img src="../img.mysite.md/events/danceni/s01danceni.jpg" >
</a>
<a href="http://www.google.com">
<img src="../img.mysite.md/events/danceni/s02danceni.jpg" >
</a>
</div>
Above code the two images is sliding but last link http://www.google.com is working but http://www.learnphp.in not working.
How to change link with images?
This is because they are putting two images one over another:
<div class="imageSlideshowHolder" id="imageSlideshowHolder">
<img src="http://www.dhtmlgoodies.com/scripts/image-slideshow-4/images/image1.jpg" onclick="window.open('http://www.google.com')">
<img src="http://www.dhtmlgoodies.com/scripts/image-slideshow-4/images/image3.jpg" onclick="window.open('http://www.learnphp.in')">
</div>
But since the second image is always above first, here it will always open second link.
Either use some different library or change the library for your needs.
A mere google search result gave me following results:
http://wowslider.com/
http://bxslider.com/examples
http://www.slidesjs.com/
The slideshow works fine, the problem you have is that this javascript is not setup to provide an individual link to each image in the slideshow. As-is it won't work. I'm gonna see if I can crack ope the JS and modify it. If you rollover the image as it changes you will see that the url in your status bar never changes. Only one anchor tag is working and the content is getting switched out inside that element. You will need to assign a link via JS to each image as it changes.
(I see I was a few mins late on the answer) As the user below said, there are other image slideshow libraries that can do this for you with no modification.
This slideshow code is not optimized, you should look for another javascript slideshow that has the features you want. I found this one here on Stack O and there have been a few questions that debug and actually get the links working, here are the link:
jQuery Slideshow
Add Links
And another:
Link individual images

Categories