I am using the default code. Why don't my buttons show up? Do I need to have the images locally? need absolute path?
<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="myclient"></a>
<a class="addthis_button_twitter_follow" addthis:userid="myclient"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="myclient"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-510e973014b90fdf"></script>
<!-- AddThis Follow END -->
You don't need the images to be stored locally.
You don't need an absolute path
Have you checked if the js is loading properly? You can do that in chrome (developer tools) or firefox (firebug) and check if it is able to get the script loading with no errors.
Related
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I'm just getting back into web development so forgive me if I sound ignorant. I'm trying to set up a lightbox effect using Magnific Popup. I love it because all of the examples are using responsive design.
I've followed instructions here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
And here: http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/
A few times and I don't understand why the pop up isn't coming up. It just links me to a new window with the image on it and not a pop up.
I have this in my head tag:
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>
</script>
<script>
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
This is my html:
<a class="image-popup-vertical-fit" href="images/logo.png" title="TITLE">
<img src="images/print.png" border="0" align="center" class="image2" /></a>
I had the same problem, and had the same setup as you. I thought I had called the jQuery library already, but apparently not, because as soon as I added the code (below) before closing my HEAD, everything started working! I know this answer is about a year belated, but maybe it will help others in the future.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
i tried since friday to install a playlist plugin to videojs but it dosent work for me.
i want this plugin : https://github.com/Belelros/videojs-playLists i red the documentation but i cant figured out what the problem is.
here are my Code snippets
<video class="video-js vjs-default-skin"
controls preload="auto" width="530" height="298"
data-setup='{"plugins":{"videojs-playlists"} } '>
<source src="../../../../../fileadmin/Film01.mp4" type='video/mp4' />
</video>
</div>
<div class="vt-video-player-playlist">
<ul>
<li data-videoplaylist="0">Critical Chain - in 5 Minuten erklärt</li>
<li data-videoplaylist="1">Critical Chain Multi Projektmanagement</li>
<li>Results of Critical Chain at von Ardenne..</li>
<li>Zuverlässige Projekte - Sichere Liquidität</li>
</ul>
</div>
</div>
and at the end of the site i load the js files
<script src="../../../Public/3rd/jquery-1.10.2/jquery-1.10.2.min.js"></script>
<script src="../../../Public/Js/common.js"></script>
<script src="../../../Public/Js/menuslider.js"></script>
<script src="../../../Public/3rd/video-js/video.js"></script>
<script src="../../../Public/3rd/videojs-playLists-master/dist/videojs-playlists.js"></script>
<script src="../../../Public/Js/videoplayer-settings.js"></script>
i hope you can help me. thanks in advance!
Well, there is currently an issue with the playlist which is basically this one:
https://github.com/Belelros/videojs-playLists/issues/6
The thing is that I was using some minified var name for getting videojs instance. I need to fix that ASAP. However, as a workaround, you can edit in Line 22 of videojs-playlist, and replace this:
player.pl.el = player.N;
By this:
player.pl.el = player.a;
Worked for me on another file... Not an optimal solution but should at least work.
I have a sharethis link on my site having the below mentioned code ...
<script type="text/javascript">
addthis_url = location.href;
addthis_title = document.title;
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12"></script>
But this is not working as the page stops loading after the addthis_widget.php like . I even changed the code to newer version i.e.
<!-- AddThis Button BEGIN --> <a class="addthis_button"></a> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=ogmios"></script> <!-- AddThis Button END -->
But this code is too stopping the page load in IE8.
Any help will be appreciated.
Thanks
Jawed
Jawed,
Looks like you are using AddThis not ShareThis..
Why don't you try using ShareThis instead http://sharethis.com/publishers/get-sharing-tools
-Manu
So I have something like this:
<html>
<body>
<div id="jqt">
<div id="page1">
...
</div>
....
<div id="generic">
Some generic page to use as a template
</div>
</div>
</body>
</html>
and I want to create a new page on after everything is loaded and the user does some action.
$('#generic').clone().attr('id', 'some_new_page').appendTo('#jqt');
What happens is the new page ends up showing up in front of everything and doesn't seem to have and jqtouch events or styles added.
How do initialize this page (or at least have jqtouch reinitialize the whole html file)?
I don't want it to show up at first, I just wanted loaded and ready in the background.
Have you tried to do a deep clone with data and events instead?
$('#generic').clone(true, true).attr('id', 'some_new_page').appendTo('#jqt');