We Keep Coding

Form 'submit button' won't SLIDE

Would you please tell me why the slide function won't work ?
https://jsfiddle.net/lcoulon/51gn2v45/
It won't slide either into a real HTML page even i called CSS and jquery :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="../css/slide-submit.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
My final is to integrate this submit button into a Bootstrap4 webpage template.
Many thanks for your help,

First, in JSfiddle example problem was with the links.
Here (after few attempts) working example
Second, or your website seems like you forgot to add slider handling code.
As you said, no errors in console, so I just tried to add code directly
(Only this part above to see if it would change something)
/*!
* Slide to submit button
*/
$(".slide-submit button").draggable({cancel: false, containment: "parent", axis: "x", stop: function() {
if (($(this).parent().width() / 2) === ($(this).position().left + 8)) {
$(this).css({left: "auto", right: 0}).addClass("submitted").text("Submitting...").draggable('false');
$(this).closest("form").submit();
} else {
$(this).css({left: 0});
}
}}).on("click", function() {
return false;
});
And it looks like it worked out (recorded animation here)

Show and hide content once tweet

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

jQuery scripts don't want to work together

I am making a website. I am doing responsive menu and jQuery script work but not good. I mean that every single script wokrs very well but all of them together don't want to work that good. The first one, this from responsive menu is killing every thing, so this menu is not working as it should be :/
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
});
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link').click(function() { $.scrollTo($('#zjazd'), 2000); });
}
);
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
});
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});
//Kliknij aby przewinąć do góry
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
</script>
So what is wrong? What is going om? I'm still learning and it can be really silly problem but for today for me...
All website is responsive already.
You can see here what's wrong
When I delete rest of scripts and leave only this for responsive menu it works beautiful, when I delete this for responsive menu then all rest works well, but when all scripts are together then only this for menu works not well but rest of it works normal. I don't know what is going on.
I'm still learning... and the website which I'm working od is pretty good.

You only need one $(document).ready(function() { });
And the first thing inside of it should be calling the plugins you want to use.
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
$.scrollTo(0);
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
$('#link').click(function() {
$.scrollTo($('#zjazd'), 2000);
});
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});

Jquery 2 scripts aren't cooperating

I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.

This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.

Using Firebug debugger to solve script conflict

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.
}