So I need to use addthis. Please visit my page which I am trying to implement add this.
http://www.iamvishal.com/dev/node/13
The add this buttons won't show up on my page. I am able to implement it using plain html code but the drupal implementation is not working.
The js is getting loaded but I am unable to debug the problem as I am unable to find the problem why this is happening.
cheers,
Vishal
p.s - for more on addthis pls visit http://www.addthis.com/
code:
<script type="text/javascript">
(function ($) {
Drupal.behaviors.slider = {
attach:function(context) {
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
window.addthis = null;
}
$.getScript(script);
}
};
}(jQuery));
</script>
<div id="sociallinks">
<div class="viewing">Request a viewing</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
</div><!-- end of social links -->
What worked for me in D7 was to create a new 'text format' where there were no filters enabled. For whatever reason D7 thinks that the AddThis code is faulty or incomplete.
configuration > content authoring > text formats > add text format
Give it a shot.
Related
I am trying to create custom button for pinterest. I was able to use a custom image as a button but it is not working properly.
Here is the CSS I am using.
span[data-pin-log="button_pinit_bookmarklet"] {
}
span[data-pin-log="button_pinit_bookmarklet"]::after {
content: url('../images/icon.png');
}
In the ScreenShot I have marked the button I am working on using red color. I have marked the areas I want to get rid off using blue color.
I am stuck on this problem for more than 12 hours. So, any help will be really appreciated.
You can get the Pinterest Button Using these codes
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
For custom button
The data-pin-custom="true" attribute is important because it keeps your custom markup, including your HTML and CSS.
<a href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonBookmark"
data-pin-custom="true">
--YOUR CUSTOM HTML--
</a>
--YOUR CUSTOM HTML-- Given likes as below
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
<p>Ordinary button</p>
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<p>Custom button</p>
<a data-pin-do="buttonPin" href="" data-pin-custom="true">
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
</a>
For more information: Visit https://developers.pinterest.com/docs/widgets/save/?
I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?
Current template code:
<link rel="stylesheet" href="#App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="#App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="#App.Path/dist/app/view.css" data-enableoptimizations="true" />
#if(#Dnn.User.IsSuperUser)
{
#Content.Toolbar
} else {
#Edit.Toolbar(Content, actions: "edit,add")
}
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
#* this is the rotator element *#
<div id='blueimp-gallery-#Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
<div class='slides'></div>
<h3 class='title'></h3>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type="text/javascript">
$(document).ready(function () {
// initialize the carousel gallery
blueimp.Gallery($('[data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID"]').get(), {
container: '#blueimp-gallery-#Dnn.Module.ModuleID',
carousel: true
}
);
});
</script>
Also note that when I click on meta data tag, the following error message pop up appears:
Note: Version: 9.2.0
UPDATE:
Changing "Image Metadata" to "ImageMetadata" worked thx.
Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't?
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" alt="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
So you're asking a few things at the same time.
number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :
#(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)
number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"
Hello i am developing my own functionality plugin on wordpress and i am stuck on trying to pass a variable from a page to a modal that opens after a link is clicked displaying a delete confirm dialog
The link opening the modal is
<a href="<?php echo $passing_var?>" data-reveal-id="deleteModal" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
The Modal window code
<div id="deleteModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2>Are you sure you want to DELETE? <?php echo get_the_title( $passing_var ); ?> </h2>
<p class="lead">This cannot be undone</p>
<a class="deleteButton button" href="#">delete</a>
<a class="close-reveal-modal">×</a>
</div>
How can pass $passing_var from the main page to the modal window?
Set Data Attibute
<a data-id="<?php echo $passing_var?>" class="deleteLink">
<i class="fi-trash size-24 icolored"></i>
</a>
Read data attribute to use in modal
$(document).on("click", ".deleteLink", function () {
var dataId = $(this).data('id');
$('#deleteModal').modal('show');
});
Finally got it working after a lot of trial and error and google research... nothing unexpected here... :(
So if anybody in the future needs to pass a variable from a page to a modal must follow three steps...
1.Create the modal button
<button data-reveal-id="myModal" data-my-number="1">First One</button>
2.Add the Modal Dialog
<div id="myModal" class="reveal-modal"><h2>Awesome. I have it.</h2><p class="lead">The <span class="buttonText"></span>. It is mine.</p><a class="close-reveal-modal">×</a></div>
3.Add the Javascript
$(document).foundation();$('[data-reveal-id]').on('click', function() {var targetModal = $('#' + $(this).data('revealId'));var newText = $(this).text() +' (' + $(this).data('myNumber') + ')';targetModal.find('.buttonText').text(newText);});
Please visit this link if you want to see a working example... thank you all
Our website: https://www.anticancerclub.com/
I am using some Google API RSS Feed code in the middle of our page (titles are "What's New", "Food for Thought", "Tell Your Story"). I also have a slideshow (s3slider) in the top left corner of the content area on the home page. Neither of which are showing in all browsers.
When I go to the page using Firefox (v.22) I can see them both. But when I go to the page in IE (v.10), Chrome (v.28), or Safari (v.5.1.7) they do not appear.
Is this because the site is using an SSL (https://) and the slideshow and rss feeds are not secure? Ironically this is Google API and it doesn't work in Chrome.
Here is the code for the RSS Feed:
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add three feeds.
feedControl.addFeed("http://accnutritionalbootcamp.com/accblog/?feed=rss2", "What's New");
feedControl.addFeed("http://www.accnutritionalbootcamp.com/?feed=rss2", "Food For Thought");
feedControl.addFeed("http://www.accnutritionalbootcamp.com/mystory/?feed=rss2", "Tell Your Story");
// Draw it.
feedControl.draw(document.getElementById("my_feed")); // Sends info to <div id="#my_feed"></div> on homepage.
}
google.setOnLoadCallback(OnLoad);
</script>
Here is the code for the Slideshow:
<!-- IMAGE SLIDER JavaScripts-->
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<!-- END IMAGE SLIDER JavaScripts-->
<!-- IMAGE SLIDER HTML -->
<td colspan="2" width="300" height="215">
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://rquox.pzldq.servertrust.com/v/vspfiles/photos/slider/slide1.jpg">
<span> Nutrition</span>
</li>
<li class="s3sliderImage">
<img src="http://rquox.pzldq.servertrust.com/v/vspfiles/photos/slider/slide2.jpg">
<span>Exercise</span>
</li>
<li class="s3sliderImage">
<img src="http://rquox.pzldq.servertrust.com/v/vspfiles/photos/slider/slide3.jpg">
<span> Stress Management</span>
</li>
<li class="s3sliderImage">
<img src="http://rquox.pzldq.servertrust.com/v/vspfiles/photos/slider/slide4.jpg">
<span> Connection</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</td>
<!-- END IMAGE SLIDER -->
Any help with this matter would be much appreciated. Thank you!
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question 1: How do I make CV button to automatically pop-up the pdf resume or cv. So after I get this done, I won't need div saying lorem as a hyperlink.
Under the navigation class:
<li>CV</li>
When I replace #cv from href with a pdf link, the whole website goes wrong.
Thats it for now. Thanks in advance!
Javascript:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
HTML :
<li><a href="" onclick="return popitup('cv.pdf')" >CV</a></li>