Trying to get click function to work on website - javascript

Here is my website at http://tylerfurby.com - I am trying to get this following click function to work:
$("#click").click(function() {
console.log('clicked on #click');
enterSite();
});
It seems do be doing nothing at the moment, here is the HTML:
<div class="interact">
<h2 id="click"><a class="enterSite">Click here to continue</a></h2>
</div>
<script type="text/javascript" src="script.js"></script>
</div>
And here is the function I am trying to have called within the click function:
var enterSite = function () {
$("#click").addClass('blur');
$("#click").animate({ left: "100%" }, 2000,'easeOutElastic', function() {
$(this).removeClass('blur')
});
}
Thanks for your time.

Your problem is a z-index problem. The #click is not receiving the event. Also, "click anywhere" should probably use $(window).on("click") instead.

Related

How to call JS function with jQuery using animate.css

I am using animate.css library.
I have this Javascript function
function animationClick(element, animation){
element = $(element);
element.click(
function() {
element.addClass('animated ' + animation);
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 600);
});
}
I have this jQuery call
$(document).ready(function(){
$("#startButton").click(function() {
animationClick(this, 'pulse');
});
});
This is my html
<input id="startButton" class="btn contained animated fadeInDown" type="button" id="startButton" value="Start!"></input>
What i have tried, i have tried adding onclick="" to my html button, and calling the function directly, nothing seemed to work.
I thought something was wrong with the animation, so i tried to do a simple .hide instead but my jQuery still hasn't worked
I've looked online and made sure my pages are calling each other properly, such as <link rel="stylesheet" href="animation.css"> and <script src="play.js"></script>
I have also tried to import jQuery versions by downloading it locally and calling the file <script src="jquery-3.3.1.min.js"></script>
Help appreciated
An update:
I have checked the page console and this message appears: Uncaught ReferenceError: $ is not defined
at play.js:92
Line 92 is $(document).ready(function () {
I'm thinking this is an importing of jQuery issue, but i have already imported it. Isn't the import correct?
You can try this code.
$(document).ready(function(){
$(document).on("click","#startButton",function() {
$(this).addClass('animated pulse');
window.setTimeout( function(){
$(this).removeClass('animated pulse');
}, 600);
});
});
No need to call a function you can add and remove class directly on click event of jQuery!!
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#startButton").on("click", function() {
$(this).addClass('animated pulse');
window.setTimeout( function(){
$(this).removeClass('animated pulse');
}, 600);
});
</script>
This is how your code should look, maybe your loading your jquery after your dom function.

Jquery mobile chained popup dynamic positioning

I have a jquery-mobile popup #graphic-menu activated by an onClick event (getPosition() is in another included script, and works as expected):
HTML
Graphic menu
CSS
function showGM(pos){
$("#menu-buttons").popup("close");
$("#menu-buttons").bind({
popupafterclose: function(event, ui){
$("#graphic-menu").popup("open", {x:pos.x, y:pos.y});
}
});
}
The catch is that #gm-btn is itself part of a parent popup #menu-buttons that:
is called to appear several times
appears at different locations (it's a dragable element)
showGM(pos) uses the position of the #gm-btn when the parent popup first appears, and doesn't change for subsequent child popups when reclicked.
How can I get showGM(getPosition(this)) to correctly recalculate the position of #gm-btn when called (or, more likely, what have I screwed up in my code)?
Edit: at the moment, I'm making things work by storing the position in a variable with global scope (since there's only ever one #menu-buttons active), and passing that to #graphic-menu so it knows where to open. I think this probably isn't good programming practice, so if someone has a better suggestion I'd love to hear about it.
Based on the API (http://api.jquerymobile.com/popup/), they say:
Note: Chaining of popups not allowed: "The framework does not currently support chaining of popups so it's not possible to embed a
link from one popup to another popup. All links with a
data-rel="popup" inside a popup will not do anything at all."
A workaround to get chained popups working is the use of a timeout for
example in the popupafterclose event bound to the invoking popup. In
the following example, when the first popup is closed, the second will
be opened by a delayed call to the open method:
$( document ).on( "pageinit", function() {
$( ".popupParent" ).on({
popupafterclose: function() {
setTimeout(function() { $( ".popupChild" ).popup( "open" ) }, 100 );
}
});
});
In regards to jsFiddle, it works good for this type of testing: https://jsfiddle.net/Twisty/4gjdp4te/7/ You had not set the JQuery library, so I set it to 2.1.3, and retained your JQM 1.4.5 link.
My attempt so far has not yielded the results you want, but you can at least see what direction to take. I plan to keep working on it and will update my answer.
HTML
<div data-role="page">
<div role="main" class="ui-content">
<a id="anchor1" href="#pop-1" data-rel="popup" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="pop-1" data-position-to="#anchor1">
<p>This is a basic popup.</p>
<button id="firstbutton" data-rel="popup">Button to open 2nd popup</button>
</div>
<div data-role="popup" id="pop-2">
<p>This is another basic popup.</p>
</div>
</div>
</div>
JQUERY
var buttonClick = false;
$(document).on("pageinit", function () {
$("#pop-1").on({
popupafterclose: function () {
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
});
$(document).ready(function () {
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});
EDIT
I got the code you need: https://jsfiddle.net/Twisty/4gjdp4te/8/
JQUERY
var buttonClick = false;
$(document).ready(function () {
$("#pop-1").popup({
afterclose: function(){
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});

How to properly load html code on a jquery dialog?

im trying to load a piece of html inside a jquery dialog, this piece of code is located in a separated file, but sometimes fails to load it right. It happens like this :
This is how it should have been displayed.
But sometimes(many times actually) does this:
This is the code that calls the dialog
.click(function(){
var me = this;
$.ajax({
type:"POST",
url:"../CuentaEquipo.php",
dataType: "json",
data:"idEquipo="+$(this).attr("idEquipo")+"&idTorneo="+$(this).attr("idTorneo")+"&action=100",
success:function(data){
if(data.data == 1){
var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html").dialog({
stack:true,
autoOpen:false,
close:function(){
$(this).dialog("close");
}
});
cuentas.dialog('open');
}
And this is the code i'm trying to load (AdministracionCuentaEquipo.html)
<script type="text/javascript">
$("#accioncuentas").tabs();
$(".test").button().click(function(){alert("ASDF")});
</script>
<div id="accioncuentas">
<ul>
<li>Abonos</li>
<li>Cargos</li>
<li>Saldos</li>
</ul>
<div id="abonos">
<button class="test">HI</button>
</div>
<div id="cargos">
<button class="test">HI</button>
</div>
<div id="saldos">
<button class="test">HI</button>
</div>
</div>
The only thing that works is closing and opening when this happens, but it's very annoying to do that. It's there any fix or i'm doing something wrong with the ajax or anything else?
Thanks .
I think the problem is that you are creating/opening the dialog before the HTML has properly been parsed.
From the jQuery documentation:
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed.
So try changing this code:
var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html").dialog({
stack:true,
autoOpen:false,
close:function(){
$(this).dialog("close");
}
});
to:
var cuentas = $("#cuentas").load("AdministracionCuentaEquipo.html", function(e)
{
$("#cuentas").dialog({
stack:true,
autoOpen:false,
close:function(){
$(this).dialog("close");
}
});
EDIT: the line $("#accioncuentas").tabs(); might also fire too early, so you could change that script tag to wrap it in a function and call that function in your other code.
Example:
<script type="text/javascript">
function InitializeTabs()
{
$("#accioncuentas").tabs();
}
</script>
and then add the line InitializeTabs(); to your code, for example above the line $("#cuentas").dialog({.
SECOND EDIT: I actually think Dasarp is correct in saying that the $("#accioncuentas").tabs(); is the main problem. Either wrap it in a function as I suggested, or move the entire <script> tag down to the bottom of the file (below all your HTML).

jQuery fadeOut one div, fadeIn another on its place

I'm trying a simple jQuery script to fadeout one div and fadein another one in it's place but for some reason the first div never fades out. It's probably an obvious problem with the code but I cannot seem to make it out.
<style>
#cuerpo { display: none; }
</style>
<div id="cuerpo"></div>
<div id="inicio"></div>
<script>
function delayed() {
$("div").fadeIn(3000, function () {
$("cuerpo").fadeIn("slow");
});
}
$("a").click(function () {
$("inicio").fadeOut("slow");
setTimeout("delayed()",500);
});
</script>
How should I do it? What am I doing wrong?
UPDATE
The simplest way to do this is by using a callback:
$('a').click(function(){
$('#fadeout').fadeOut(300, function () {
$('#fadein').fadeIn(300);
});
});
then the HTML:
In/Out
<div id="fadeout">Fade Out</div>
<div id="fadein" style="display:none;">Fade In</div>
OLD:
There is a simple way to do this:
$('a').click(function(){
$('#fadeout').fadeOut(300);
$('#fadein').delay(400).fadeIn(300);
});
I think you can use callback...
$('#fadeout').fadeOut(300, function(){
$("#fadein").fadeIn(300);
});
this is the most stable way....
There is a syntax error
it should be
$("#inicio").fadeOut("slow");
and not
$("inicio").fadeOut("slow");
Similarly
$("#cuerpo").fadeIn("slow");
and not
$("cuerpo").fadeIn("slow");

JQuery click text in span?

I'm trying to use JQuery to have a method fire when the following code gets clicked:
<div class="content_sub_list">
<img src="/imgs/close-icon.jpg" class="exit_sub_list"/>
hello
</div>
It is not doing anything and my JQuery code looks like this:
$(document).ready(
function()
{
$('#my_accnt').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "4px");
$('.content_sub_list').html('<div class="sub_list_header">My A<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('#my_queue').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "165px");
$('.content_sub_list').html('<div class="sub_list_header">My Q<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('.exit_sub_list').click(
function()
{
alert("hi");
$('.content_sub_list').css("display", "none");
});
});
My header looks like this:
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/mContentBar.js" type="text/javascript"></script>
Other functions work in it except this one? for some reason.
So what am I doing wrong, or how i can get this to work? Thanks
This is working for me. Make sure you have jQuery loaded properly. You can either place jquery.js after your html or wrap your jquery code with a document.ready function.
like
(function() {
$('.exit_sub_list').click(
function() {
alert("hi");
});
});
Check working example at http://jsfiddle.net/p6Q2d/

Categories

Resources