I am working on a way to hide the twitter button once clicked on show new content, I thought I had it working but its still not. I am not sure why if someone could point out my mistake that would help.
Thanks.
----UPDATE----
its when I add this script it stops working
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
and
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
----UPDATE END----
Here's the code:
(function($) {
var win = null;
$.fn.tweetAction = function(options, callback) {
// Default parameters of the tweet popup:
options = $.extend({
url: window.location.href
}, options);
return this.click(function(e) {
if (win) {
// If a popup window is already shown,
// do nothing;
e.preventDefault();
return;
}
var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;
var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');
// Opening a popup window pointing to the twitter intent API:
win = window.open('http://twitter.com/intent/tweet?' + $.param(options),
'TweetWindow', config);
// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {
try {
// Opera raises a security exception, so we
// need to put this code in a try/catch:
if (!win || win.closed) {
throw "Closed!";
} else {
setTimeout(checkWindow, 100);
}
} catch (e) {
// Executing the callback, passed
// as an argument to the plugin.
win = null;
callback();
}
})();
e.preventDefault();
});
};
})(jQuery);
$(document).ready(function() {
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
}, function() {
$('hidden-text')
.show();
$(".hidden-text").removeClass("hidden-text");
});
});
$(document).ready(function() {
$("p").click(function() {
$(this).hide("slow");
});
});
.hidden-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Tweet to show content.
Tweet to #your_twitter
</p>
<p class="hidden-text">thank you for tweeting !</p>
UPDATE
Optimised some js
$(document).ready(function () {
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
}, function () {
$('hidden-text')
.show("slow");
$(".hidden-text").removeClass("hidden-text");
$("#hide-me").hide("slow");
});
});
UPDATE 3
Ok looking at the console I seem to be getting error
Uncaught TypeError: $(...).tweetAction is not a function
I have updated my Jquery CDN, when i click on Tweet to #your_twitter it now dose not open in a new window but changes the url in the same window. any ideas ?
Solved
I had to remove some CDN's
<link href="https://get.gridsetapp.com/35679/" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<!--<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>-->
<!--<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>-->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>-->
If it stops working when you add these scripts, add the scripts one by one and check your js console for errors. This should give you the hints to know where to search for the error.
Also check if those libraries are not loaded twice. If you've already loaded another jQuery library e.g., it will not work.
I see two syntax here but they don't have to do with your problem.
<a href="https://twitter.com/intent/tweet?screen_name=your_twitter" class="twitter-mention-button"
id="tweetLink" data-show-count="false">Tweet to #your_twitter/a><a href="https://twitter.com/intent/tweet?screen_name=your_twitter" class="twitter-mention-button"
id="tweetLink" data-show-count="false">Tweet to #your_twitter </a> <!--Closing the tag-->
$('.hidden-text').show(); //class picker
Related
I have fancybox setup on my page and it works fine on the initial click however if I exit fancybox and click the link again nothing happens...No console errors or anything. I use jquery to append my body element with a JS script I get from a 3rd party, that 3rd party then is then able to populate a div called "ollWidget". Any help is appreciated, thanks!
JS
jQuery(window).load(function() {
var scriptSet = false;
jQuery('.btn-availability').click(function(e) {
if ( jQuery(window).width() > 600 ) {
if ( scriptSet == false ) {
jQuery.fancybox(jQuery('<div id="ollWidget"></div>').css({ 'height': '1125', 'width': '940' }));
jQuery('body').append("\x3Cscript language='javascript' src='script-that-gets-code-from-external-site-and-populates-the-ollWidget'>\x3C/script>");
jQuery('#ollWidget').show();
scriptSet = true;
} else {
jQuery('#ollWidget').remove();
}
} else {
e.preventDefault();
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
My page was working perfectly and suddenly, the hero image is not loading and I am seeing an error message in the console "ReferenceError: imagesLoaded is not defined" on wine-cheese.js, which is preceeded by another error "Error: multipleDefine" on dojo.js. I have not changed the files since the content launched 6 weeks ago.
Some external developers have been doing some work on the site and I believe they have introduced a conflict. But I am stumped as to how to figure it out. I tried setting breakpoints in Firebug but that isn't helping me because I'm not really sure what I'm doing. All of the tutorials I find about how to use the debugger focus on one script within a page rather than debugging a page that is part of a CMS and merged with many other scripts you have no control over.
When I check the content locally, everything works OK (I used absolute links to reference all the scripts and files to be sure they are actually on the server), so I think there is a conflict with dojo, or maybe even something else.
I have been trying to figure this out all day and feel like I am going in circles.
Any help or advice would be much appreciated. The page in question is here.
Here is the code in the javascript file that causes the error. The site I work on has jQuery 1.3.2 so we have to use noConflict to run a newer library in parallel (hence the jwc)
$.fn.tabs = function() {
return this.each(function() {
var $el = $(this);
var $panels = $el.find('> div');
var $tabs = $el.find('> ul a');
$tabs.click(function() {
setTimeout(function() {
if (window.location.hash) {
window.scrollTo(0, 489);
}
}, 1);
$tabs.removeClass('active');
$(this).addClass('active');
$panels.fadeOut(250);
$panels.filter(this.hash).animate({
opacity:1},
250, 'linear', function(){
$(this).show();
});
animateHeader(this.hash);
//window.location.hash = this.hash;
//return false;
});
if(window.location.hash != 'undefined' && window.location.hash != '') {
//alert(window.location.hash);
tabId = '[href*="' + window.location.hash + '"]';
$tabs.filter(tabId).click();
} else {
$tabs.filter('[href*="#party-tips"]').click();
}
});
};
jQuery.easing.def = "easeInCubic";
function animateHeader(tab) {
if (tab == "#party-tips") {
$('#party-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#party-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#pairing-guide") {
$('#pairing-guide #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#pairing-guide #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#quick-tips") {
$('#quick-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#quick-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
}
}
function laodAnimation() {
imagesLoaded('img#sipbg', function(){
$('#loadblock').hide();
$('img#sipbg').animate({
opacity:1
}, 250, 'linear');
$('#top-block').delay(250).animate({
top:0
}, 350, 'swing', function(){
$('h1#wc-logo').animate({
top:30,
left:84
}, 750, 'linear', function(){
$('span#wine-glass').animate({
top:105,
left:136
}, 500, 'swing', function(){
$('span#text-sip').fadeIn(250, function(){
$('span#text-savor').delay(500).fadeIn(250, function(){
$('span#text-repeat').delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$('span##text-endless').delay(500).fadeIn(350);
$('#bottom-block').animate({
bottom:0
}, 350, 'swing', function() {
$('#bottom-block h1').delay(350).fadeIn(750);
});
});
});
});
});
});
});
});
});
});
});
$('#main-grid').delay(400).animate({
opacity:1
}, 1200, 'linear');
});
}
The first part of the content I plug into the CMS looks like this; imagesLoaded is defined in the second script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/retina.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/wine-cheese.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53d6affc389982ed"></script>
<script type="text/javascript">
var jwc = jQuery.noConflict(true);
jwc(document).ready(function() {
jwc("a#box").fancybox({
maxWidth : 800,
maxHeight : 680,
fitToView : true,
width : '70%',
height : '90%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
laodAnimation();
});
</script>
I recommend using either chrome/chromium or safari for their web console. You can then open up the web inspector and set the inspector to catch all errors.
The tools there should help you figure out where the problem is.
Update:
Looking at the link you provided I saw the problem is with the imageloader.js call. It seems to be defining multiple times the same object. You could try wrapping it in a js check.
Update 2:
Ok so I tested your scripts in jsfiddle. I found the problem to be based in a conflict between dojo and the imagesloaded script. I set up a jsfiddle to test out the scripts to see if the class imagesLoader is defined. In the left toolbar if you change in the settings on the left between jQuery and Dojo frameworks the imagesLoaded js script stops working. The problem is that since it is packaged it doesn't signal an error. Either you make a new script from scratch or find an alternative.
if(!alreadyDefined) {
alreadyDefined=true;
//Rest of your code.
}
I am using yepnope.js but having a slight issue with on load loading a function
in the head i include yep nope and make a call to the relevant js file
<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>
<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
nope:['/templates/client/jquery/qff/plugin.website.js']
});
</script>
and then at the bottom of the page
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
});
</script>
so i am looking at this on a main screen. so it's suppoed to call in plugin.mobile.js
in the plugin.mobile.js file
(function( $ ){
$.fn.setupQantas = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
startSlide: 1,
googleAnalytics:0, // 1 sends to google
googleCode: ""
}, options);
var methods = {};
return this.each(function() {
if (settings.startSlide === 1) {
alert("slide = 1");
} else {
alert("slide > 1");
}
});
};
})( jQuery );// JavaScript Document
instead of giving the alert slide 1 it has the error
jQuery("#mainContent").setupQantas is not a function
if i dont use yepnope and just have it in a script tag it works. There seems to be a delay on when the yepnope loads in the js file and doesnt seem to do before doc.ready
is there a way around this?
thanks
Yes there is a delay. That's all the point behind an asynchronous script loader.
You should use a callback after the script is loaded by yepnope. Check the complete and callback options.
here is the code
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/mobile.js'],
nope:['/templates/client/jquery/qff/website.js'],
complete: function () {
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
}
});
</script>
On a website im building on a Joomla CMS i call inside the head tag these javascripts :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');</script>
I have two javascripts inserted on my index.php
One for a slideshow (gallerific) and another one for a dropdown menu.
The slideshow javascript :
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.9;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
/****************************************************************************************/
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
And the dropdown menu:
<script language="javascript" type="text/javascript">
var axm = {
openMenu: function() {
$('#newmenuheader').stop().animate({ 'height':'140px'}, "fast");
},
closeMenu: function() {
$('#newmenuheader').stop().css({'overflow': 'hidden'}).animate({'height':'55px'}, "fast");
},
};
</script>
I can get only one script run at a time not both. If one runs the other doesn't. I need to have them both.
At the time the javascript for the slideshow is running. Is there a conflict of some sort ?
Thanks in advance.
The second chunk of javascript code with the var axm needs to be added to the
jQuery(document).ready(function($) {}
Otherwise the browser doesn't know to run it. And you should re-write this function, don't use
jQuery(document).ready(function($) {}
just use
$(function(){
//your javascript and jQuery here for binding events, styles, and functions
}
this is a function that will run once the page is ready.
I'm trying to use shadowbox in multiple occasions: sometimes I happen to need more than one dialog at the same time.
In this simple example I try to close one existing window and re-open another one but is not opening the second one. What I'm doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="shadowbox.css" type="text/css">
<style type="text/css" media="screen">
#sb-body, #sb-loading { background:#eee; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="shadowbox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Shadowbox.init();
window.onload = function(){
Shadowbox.open({
content: 'First window. <a id="open-second" href="http://www.google.com">open another window</a>.',
player: "html"
});
$('#open-second').live('click', function(e){
e.preventDefault();
Shadowbox.close();
Shadowbox.open({
content: 'Second window.',
player: "html"
});
});
};
</script>
</head>
<body>blabla.</body>
</html>
Regards,
Adit
Sorry 'bout this, but I think I'll move towards colorbox as it seems far more stable:
$('#second-btn').live('click', function(e){
e.preventDefault();
$.colorbox({
onComplete: function(){
$('#cboxLoadedContent').append('second opened');
$('#cboxClose').attr('id', 'cboxClose_disabled');
},
html:'<p>Second <a id="first-btn" href="x">first</a></p>',
width: 500, height: 200
});
});
function showfirst(){
$.colorbox({
onLoad: function(){ $('#cboxClose_disabled').attr('id', 'cboxClose'); },
onComplete: function(){ $('#cboxLoadedContent').append('first opened') },
html:'<p>First <a id="second-btn" href="x">second</a></p>',
width: 500, height: 200
});
}
$('#first-btn').live('click', function(e){
e.preventDefault();
showfirst()
});
showfirst();
Hey, am I talking alone?! XD
Here's what I'll use; not happy with this as:
- I'm forcing a widely used plugin doing a simple task (close a window and open another)
- it needs to override each shadowbox feature (now only player "html" is implemented).
Here a full working example.
var shadowbox_orig_open = Shadowbox.open;
Shadowbox.reOpenable = function(new_opts) {
if(Shadowbox.isOpen()){
// close other dialog
Shadowbox.options.onClose(Shadowbox.getCurrent());
if(new_opts.player == "html"){
$('#sb-player').fadeOut('normal', function(){ $(this).html(new_opts.content).fadeIn(); });
}else{
// ???
}
// set other new hooks
Shadowbox.options = new_opts.options;
}else{
shadowbox_orig_open(new_opts);
}
};