As I'm doing some jQuery html replacement on a responsive design, it was suggested that I use the addthis.toolbox method instead of the init method from AddThis.
Even though my code is specifying the 32x32 pixel buttons they're getting displayed with the bottom half of the graphic cut off and the alt text displaying. Here's the code:
<div id="zazoo" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_follow" addthis:userid="example"></a>
<a class="addthis_button_twitter_follow" addthis:userid="example"></a>
<a class="addthis_button_google_follow" addthis:userid="xx"></a>
<a class="addthis_button_youtube_follow" addthis:userid="example"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=example&async=1">
</script>
<script type="text/javascript">
addthis.toolbox("#zazoo");
</script>
I even made a stripped down version that's just the code and still see the issue with the cut off buttons. For the AddThis users out there...can you see a problem with the code or is a system issue on AddThis' end? I can't see any issue with the code itself, just the way it's getting displayed.
The addthis.toolbox() method only works after you've called the addthis.init() method if you're using the async flag. Change your code to this:
<div id="zazoo" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_twitter_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_google_follow" addthis:userid="108569913685983365364"></a>
<a class="addthis_button_youtube_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_rss_follow" addthis:userid="http://feeds.feedburner.com/DigitalHitEntertainmentNews"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=dheian&async=1"></script>
<script type="text/javascript">
<!--
addthis.init();
// -->
</script>
The addthis.toolbox() method is only used to render the buttons after the first initialization.
Related
How to activate the tab when I click the link on the other page like:
when i click www.wakeke.com#go-to-tab2 the page will go to www.wakeke.com#go-to-tab2 and the tab 2 is activated.
here is my sample:
<div class="section group">
<div class="col span_1_of_4"> <!-- tab 1 -->
<img src="http://wakeke.com/media/wysiwyg/call_center.png" alt="" />
<h3>sample</h3>
<p>sample/p>
</div>
<div class="col span_1_of_4"> <!-- tab 2 -->
<img src="http://wakeke.com/media/wysiwyg/marketing.png" alt="" />
<h3>sample</h3>
<p>sample/p>
</div>
</div>
and here is the tab code:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#business" data-toggle="tab"><img src="http://wwww.wakeke/media/wysiwyg/call_center_thumb.png" alt="" />
<div class="job-desc">
<h4>sample</h4>
<h5>sample</h5>
</div>
</a></li>
<li><a href="#marketing" data-toggle="tab"><img src="http://www.wakeke/media/wysiwyg/business_dev_thumb.png" alt="" />
<div class="job-desc">
<h4>sample</h4>
<h5>sample</h5>
</div>
</a></li>
</ul>
</div>
here is the image sample:
When I click the image:
image1
it will go to another page and the tab is activated
image 2
Please help me. :)
thank you
You can use the JavaScript location.hash and some usefull jQuery this way:
<script>
$(document).ready(function(){
if(window.location.hash!=""){
// Get the hash value and remove the # from it.
var hash = window.location.hash.substr(1);
// In the nav-tabs,
// find the right tab by targetting the `h4` which contains the word you used has a hash
// and click it.
$(".nav-tabs").find("li h4:constains('"+hash+"')").click();
}
});
</script>
So now, since you provided only a sample,
You will have to find the right words to use as a hash for each tabs.
Be carefull about case sensitivity.
Use one words contained in the h4 tag inside the li (the tab) that you want to be active.
This small script must be in the page where tabs are... Anywhere in the <body>.
It takes the hash from the URL and remove the # character.
Then it uses it to find a tab.
It may find more than one! Which will not do what you want.
I think it is a good starter for you to try.
I didn't test this code as I'm used to do before posting here... So I hope there is no mistake.
;)
If you do not already use it, you have to include the jQuery library in your <head> like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
EDIT
I just noticed that you are using the same hash in the anchor's href.
So here is a variant of the same thing that should avoid the possibility of clicking more than one tab.
<script>
$(document).ready(function(){
if(window.location.hash!=""){
// Get the hash value keeping the #.
var hash = window.location.hash;
// In the nav-tabs,
// find the right tab by targetting the `a` which has the same href as your hash
// and click it.
$(".nav-tabs").find("li a[href='"+hash+'"]").click();
}
});
</script>
I'm using Jquery Rondell plugin for thumbnail carousel as following:
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png" title="...">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
<script type="text/javascript">
$(function () {
$("#rondellCarousel").rondell({
preset: "carousel"
});
});
</script>
The result shows only one image correctly. However, when adding multiple sources as following
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
<a target="_blank" rel="rondell" href="image/US2.png">
<img src="image/US2.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
The second image is not shown in the navigation carousel and instead, when I click on the only image shown in the navigation carousel two images are shown in the appearing lightbox.
Ok, this is weird. after some trial and error, I found that there is a problem with the Git version. I have downloaded the library again from a different source (their own website) and it worked!
#fareed I'm the developer of the plugin. Could you tell me which version you used initially and which one you use now?
You can find the information at the top of the js file.
So here is my issue. Say I have a menu bar that is supposed to become a dropdown when the user taps on it via a mobile device. Say that I also hate when the # symbol appears after my url when I click on said menu (www.google.com/# for example) I've been able to use the "animate scroll" javascript that allows me to smoothly scroll the site to an anchortag, which also hides the # symbol. But for some reason I am having issues trying to get my menu to open on small screens!
Here is the menu html
<div class=navmover>
<nav id="effect" class="newClass">
<ul>
<li id="mobibutton" class="lightupmobi">
<a href="#" id="button">
<div style="display:block !important;position:relative !important;top:8px !important;padding-left:0.5em !important;right:3px !important;text-align:left !important;">MENU</div>
<img id="mobibutton" src="images/nav-icon.png" style="position:relative !important;left:40% !important;">
</a>
</li>
<li id="hideme" class="lightup">
<a id=link1 href=#intro>Top</a>
</li>
<li id="hideme" class="lightup">
<a id=link2 href=#work>Work</a>
</li>
<li id="hideme" class="lightup">
<a id=link3 href=#services>Services</a>
</li>
<li id="hideme" class="lightup">
<a id=link4 href=#about>About</a>
</li>
<li id="hideme" class="lightup">
<a id=link5 href=#contact>Contact</a>
</li>
</ul>
</nav>
</div>
javascript used to open and close menu
<!--Show Hide Button JS-->
<script>
$(function() {
$("#button1").click(function() {
$("#effect").toggleClass("newClass", 1000);
$("li").toggleClass("showme", 1000);
return false;
});
});
</script>
javascript used to smoothly scroll between anchors
<script type=text/javascript>
$(document).ready(function() {
$("#link1").anchorScroll({fx:"easeInOutExpo"});
$("#link2").anchorScroll({fx:"easeInOutExpo"});
$("#link3").anchorScroll({fx:"easeInOutExpo"});
$("#link4").anchorScroll({fx:"easeInOutExpo"});
$("#link5").anchorScroll({fx:"easeInOutExpo"});
$("#link6").anchorScroll({fx:"easeInOutExpo"});
$("#link7").anchorScroll({fx:"easeInOutExpo"});
});
</script>
<script type=text/javascript>
function scrollTo(b) {
var a=$(b).offset().top;
$("html,body").animate({scrollTop:a},"slow");
}
</script>
Rest of the javascript in the site. Apologies... I realize it is a ton to look at.
<script async type="text/javascript" src="//cdn.sublimevideo.net/js/kmaxx7p4.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script async src=javascripts/svg.js></script>
<script src=javascripts/jquery.js></script>
<script src=http://html5shim.googlecode.com/svn/trunk/html5.js></script>
<script src=http://code.jquery.com/jquery-1.9.1.min.js></script>
<script src=javascripts/jquery-migrate-1.2.1.min.js></script>
<script src=javascripts/jquery.animate.js type=text/javascript></script>
<script src=javascripts/jquery.scrollanchor.js type=text/javascript></script>
<script src=javascripts/jquery.sticky.js type=text/javascript></script>
<script async src=javascripts/jquery.inview.js type=text/javascript></script>
<script async src=javascripts/jquery.flexslider.js type=text/javascript></script>
<script async src=javascripts/jquery.prettyPhoto.js type=text/javascript></script>
<script src=http://vjs.zencdn.net/c/video.js></script>
<script type=text/javascript>function ReplaceContentInContainer(c,b){var a=document.getElementById(c);a.innerHTML=b}</script>
<script type=text/javascript>function preload(a){$(a).each(function(){$("<img/>")[0].src=this})}preload(["images/bg.png","images/cloudscape2.png","images/logo2.svg","images/logo2.png",]);</script>
<script>$(function(){$(".two").css("opacity",0).fadeTo(0,0);$(".one").on("mouseenter mouseleave",function(a){var b=a.type=="mouseenter"?$(".two",this).stop().fadeTo(200,1):$(".two",this).stop().fadeTo(200,0)})});</script>
<script>$(document).ready(function(){$("nav").sticky({topSpacing:0})});</script>
<script type=text/javascript>$(document).ready(function(){$("#link1").anchorScroll({fx:"easeInOutExpo"});$("#link2").anchorScroll({fx:"easeInOutExpo"});$("#link3").anchorScroll({fx:"easeInOutExpo"});$("#link4").anchorScroll({fx:"easeInOutExpo"});$("#link5").anchorScroll({fx:"easeInOutExpo"});$("#link6").anchorScroll({fx:"easeInOutExpo"});$("#link7").anchorScroll({fx:"easeInOutExpo"});});</script>
<script type=text/javascript>function scrollTo(b){var a=$(b).offset().top;$("html,body").animate({scrollTop:a},"slow");}</script>
<script>$(window).load(function(){$(".flexslider").flexslider({animation:"slide",slideshow:true,slideshowSpeed:3500,animationSpeed:1000})});</script>
<script type=text/javascript charset=utf-8>$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false,theme:"light_square"})});</script>
If push comes to shove I can also give the link to my website so you can see for yourself on your phone/tablet and see the issue I'm having. Let me know if I'm being too vague and you guys need more info as well. Please help and thank you!
Don't use # as your href value. There are lots of different ways to "target nothing" like you are trying to do, including:
using event.preventDefault() in the code that is bound to your event, to ignore the default link behavior
using return false; at the end of the code that is bound to your event, to interrupt any further processing of the event all together
using href="javascript: void(0);" as the target of your <a> tag, to make the target "do nothing"
. . . and there are other variations, depending on the situation (e.g., event.stopPropagation() to stop the event from triggering on all of an elements ancestors, not the current element).
Personally, in this particular case, I would go the href="javascript: void(0);" route myself, but you have some wiggle room to work with, to come up with the approach that you prefer.
Update: Come to think of it, is there a reason why you are using an <a> tag to begin with (e.g., styling reasons)? You could simply bind the click on the <li> instead and remove the link behavior from the equation all together . . .
You colud run a scroll function that does what you wish
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
If you don't want a hashtag because you don't want it to go to the top of the page, just use an empty javascript: URL.
Link does nothing, tada
I have the following div on a page called Transactions.html :
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
And when I click the link <a>No</a> I want the whole div to move to another Summary.html page. Any ideas? Thanks
You can do it this way. You need to have a wrapper div tag in-order to select the entire html content.
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.red').click(function(){
var divData = $('#dataContainer').html();
window.location.href = "summarypage.html?data="+divData+"";
});
});
</script>
<div id="dataContainer">
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
</div>
In summary page you need to retrieve the data from the URL. When you run this and click 'NO' link it navigates to summary page and you can see the html values on the summary page URL bar
You can use PHP to retrieve this data using <?php echo $_REQUEST['data']; ?>
You can't - that's not how the web works. Each HTML page is self-contained and encapsulated.
Some sites, like Github, do little tricks with the JavaScript history API and AJAX to make it appear as though a new page is "partially loaded", when in fact it's the same page.
You probably need to use PHP or a server side technology for storing data and that needs complete transformation of your static pages to dynamic PHP pages, that needs lots of work.
By using the html it is not possible to transfer the data from one html file to another html file. use the JQuery to perform the data transfer
By clicking on the button, speficy in which div or place you want the data to display, by using the load() in Jquery you can load the specific data in another page to your page
I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?
The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();
html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();