Trouble with Google API RSS and Slideshow - rss

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!

Related

Pagination Wordpress in Custom Plugin ( Javascript )

Hi I hope someone can help with this. I'm building a wordpress plugin. I just have basic knowledge of php and i managed to build the whole plugin except pagination. I have tried so many code using javascript but none is working for me. Here is the image. I want to divide the items with pagination
Thank you in advance!
A good approach will be to think about the pages like tabs. Then the page link will behave like buttons that show/hide based on the page link clicked.
Here's an example using jQuery
// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
// Save the page number that was clicked
var pageNum = $(this).data('page-id')
// Hide any open 'pages'
$('.page-content').hide();
// Find and show the selected page
$('[data-page=' + pageNum + ']'').show();
});
For this to work, you'd need a HTML structure a bit like this
<!-- The Page Link -->
<div>
<ul>
<li class="page-link" data-page-id="1">Page 1</li>
<li class="page-link" data-page-id="2">Page 2</li>
<li class="page-link" data-page-id="3">Page 3</li>
</ul>
<!-- The Page Content -->
<div class="page-content" data-page="1" style="display: none;">
Page 1 content
</div>
<div class="page-content" data-page="2" style="display: none;">
Page 2 content
</div>
<div class="page-content" data-page="3" style="display: none;">
Page 3 content
</div>
</div>
Here is a super basic jsfiddle

2sxc | Bluimp Gallery App

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"

Drupal 7 and Addthis

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.

Personalized Accordion (like a list of Master-Details)

I need to create an Accordion Ajax control that in the first Pane has a list of records
(for example Users).
When the web users clic on one of them, the other Panes have to be populated with details of this user.
For example, if I clic in the first record, Pane2 will be populated with LifeDetails, Pane3 with HomeDetails, Pane4 with JobDetails and so on.
Anyone has idea of how realize this?
Thanks a lot.
Luigi
I would try to solve this using http://docs.jquery.com/UI/Accordion and http://pjax.heroku.com/ ...
Something along the lines of
<div id="accordion">
<h3>pane1</h3>
<div>
<ul id="persons">
<li>Person 1</li>
<li>Person 2</li>
<li>Person 3</li>
</ul>
</div>
<h3>Life Details</h3>
<div>
Some content here
</div>
<h3>Home Details</h3>
<div>
Some content here
</div>
<h3>Job Details </h3>
<div>
Some content here
</div>
</div>
For the markup. Then your JavaScript should be something like
<script src="jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion();
$('.persons').pjax('#accordion');
});
</script>
And in your aspx you check for the HTTP_X_PJAX header (see xhr.setRequestHeader('X-PJAX', 'true')), and if it's present, you render just the <div id="accordion"> for the selected item (without the Masterpage, just the div), if it's not present you render the whole page (with Masterpage).

JQuery Tabs Display Question - I need to display content not related to the 4 tabs(i.e. login/registration)

I have 4 JQuery Tabs in an ASP.Net MVC 3 appication. All tabs display correct content when tabs are clicked. However, I want to display Login/Registration content when a user clicks the Login/Registration link at the top of the UI page. The login/reg should display underneath the 4 tabs with none of the tab content. So the tabs need to remain visible. Although, none of them would be selected.
The problem is, both the tab content and the login/registration content shows at the same time. I need only the login/reg content that is unrelated to the tabs to display. I also need all tabs to be unselected. Any help is appreciated!
<script type="text/javascript">
$(function () {
$('#tabs').tabs();
});
</script>
<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">
<!-- Must have class= info to prevent flash of just content on refresh -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;" >
<ul class="ui-tabs-nav">
<li><a href="#tabs-1" >Home</a></li>
<li><a href="#tabs-2" >Statistics</a></li>
<li><a href="#tabs-3" >Topo Maps</a></li>
<li><a href="#tabs-4" >FAQs</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/Home") </div>
<div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Statistics/Statistics")</div>
<div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Maps/Maps")</div>
<div id="tabs-4" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/FAQs")</div>
</div>
</div>
Here you have an example http://jsfiddle.net/YnZRa/1/
Steps
Add a new tab with <li
style="display:none;">Tab 4</li>
Add the content in a new div
Edit the script with this
//Edit the script this way to show the content with a click in a link
$(document).ready(function(){
var $tabs = $( "#tabs" ).tabs();
$('.goto').click(function() { // bind click event to link
$tabs.tabs('select', 3); // switch to fourth tab
return false;
});
});
Hope it works!! :)
If I understand your question correctly, you'd like to collapse your tab content when a user is trying to login/register.
First things first, you must set the tabs options to be collapsable. So, edit your tabs calls to reflect this
$('#tabs').tabs({ collapsible: true });
From here, you can attach an event handler to your login/registration click event. You'll want to do two things, 1) get the currently selected tab index and 2) fire the tab select event to collapse your tabs. It might look something like this:
$('.login').click(function () {
var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
$("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab
// continue with your login/registration click event
});

Resources