JavaScript stops other Scripts on the Page - javascript

Well....!!!
I have Two Scripts on the Page for Two Purposes
1) For DropDown List
2) For POPUP Messages
They work without any problems independently, but one script blocks the rest from running properly wherever I include it.
Add New
Modify
Delete
and When I click Modify Or Delete To Execute The POP Message , The POP message Will Execute successfuly and when cancel or save Changes what ever I want On POP Message after when I return To the Page The Dropdown List Stop Functioning , its Not Drop the List above.
For Drop Down List I Used This JavaScript
$(function () {
$('.dropdown1').mouseenter(function () {
$('.sublinks1').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function () {
$(this).slideUp(300);
});
});
});
While For POP Message I used
<script type="text/javascript">
function ClearFields() {
};
function CloseModal(msg) {
$('#myModal').modal('hide');
if (msg.length > 0) {
alert(msg);
}
}
function ShowModal() {
$('#myModal').modal('show');
}
</script>
Referenced On The Page
<link href="../StyleSheet/DropDownMenu.css" rel="stylesheet" type="text/css" />
<script src="../JsQuery/1.10.2jquery.min.js" type="text/javascript"></script>
<script src="../JsQuery/jquery.js" type="text/javascript"></script>
<script src="../JsQuery/jquery-1.3.2.js" type="text/javascript"></script>
For Message Box
<link href="../MessageBox/BootStrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Also Also
Also
Note: Actually The Entire Codes Or HTML used in ascx

Related

jQuery(document).ready(function(){}); not working properly

In main.js
jQuery(document).ready(function(){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
In index.html
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/main.js"></script>
<head>
In style.css
.secondary{
background-color:#34495e;
}
It is a code for changing the class of a navigation bar with class 'nav' to the class 'secondary' when the page scroll to downwards
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
The above code doesn't works fine inside
jQuery(document).ready(function(){});
but,
jQuery(document).ready(function(){
"use strict"
alert("hello world");
});
works fine and some other functions also works fine
but some functions not working.
can anyone help me to find the solution for this problem
Your code is correct. Check the value of top with console.log to make sure the scroll event is fired. Otherwise you will find an error about some other part of your code.
For example, this works and is also slightly optimised:
$(document).ready(function() {
"use strict";
var $win = $(window)
var $nav = $("nav");
$win.scroll(function() {
var top = $win.scrollTop();
console.log(top);
if (top >= 60) {
$nav.addClass("secondary");
} else if ($nav.hasClass("secondary")) {
$nav.removeClass("secondary");
}
});
});
Demo: https://codepen.io/taseenb/pen/QWbxRvP
You can check what the error is on browser's inspect tool.
If you press "F12", "Developer tools" panel will be shown.
And click "Console" on this panel and check which error has been occured.
And I guess you need to use "jQuery" keyword to select elements.
Or please try following code.
jQuery(document).ready(function($){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
If you can share your page url, I can help you to check error and find a solution.
you can try on this, it works to me
put source script
<script th:src="#{/richtext/jquery.richtext.min.js}"></script>
<script th:src="#{/richtext/jquery.richtext.js}"></script>
then script text:
<script type="text/javascript">
(function($) {
$('#shortDescription').richText();
$('#fullDescription').richText();
})(jQuery);
</script>

jQuery - Hide / Show not displaying div and showing error

I was wondering if someone could help me out with a bit of jquery im trying to write.
Im quite new to jQuery so this is prob something easy.
I have a div with an id of 'about-box'
I want it to slide in and out of the viewport when a menu item is pressed.
I have the following jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if($('#about-box:visible').length)
$('#about-box').hide("slide", { direction: "left" }, 1000);
else
$('#about-box').show("slide", { direction: "left" }, 1000);
});
});
</script>
But i am getting the following error message:
Uncaught TypeError: undefined is not a function
Any help getting this to work would be greatly appreciated.
I think the problem is you are not including jQuery-UI in your page, the show/hide implementation you have used requires jQuery UI
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
if ($('#about-box').stop(true, true).is(':visible')) {
$('#about-box').hide("slide", {
direction: "left"
}, 1000);
} else {
$('#about-box').show("slide", {
direction: "left"
}, 1000);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
You can also use jQueryUI toggle
$(document).ready(function() {
$('#menu-item-1 a').click(function() {
$('#about-box').toggle("slide", {
direction: "left"
}, 1000);
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>
since document is for sure a good element the undefined is not on the ready
:visible looks good see here http://api.jquery.com/visible-selector/
So the undefined must be here $('#menu-item-1 a').click or in other code in your page or on the execution of the ready.
Try to find where . remove the if else . does the undefined throw?? if yes the $('#menu-item-1 a') doesnt resolve.
wish it help
try changing the selector to
$('#about-box').is(':visible')
$('#about-box:visible') is a wrong selector,I think you can toggle a class on about-box button and decide slide in or out

creating a popup window with jquery just after the page finish the loading without any button to be pressed

i created a popup window using html and javascript and jquery with button click where the user must press on the link to show the popup window
what i need is to make the window popup without clicking on any link or button just after the page finish the loading
can anyone help me with this ???
this is the code for the popup window
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Popup window</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
Click Here Trigger
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
<p>
TEST FOR THE POPUP WINDOW. </p>
<br />
<p align="center">Click Here Trigger</p>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
</html>
script.js
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
Define a document ready function and call your code there.
$(document).ready(function(){
alert('Hello World!');
});
DEMO

lightbox_me - open different popups on same page

I am trying to create a page with multiple popups on the same page. I want the first popup to open on page load which I can get to work with
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#sign_up").lightbox_me({centered: true, onLoad: function() { $('#sign_up').find ('input:first').focus()}});
}); // document ready
</script>
<body onload="$('#sign_up').trigger('click');">
But then I want the user to be able to click a link in that popup that will stay on the same page but open up a different popup. And again from the second popup I want the user to be able to click a link to open a 3rd popup.
Using this code I can click a link in the first popup (sign_up) Click here which does open the second popup (sign1) but the first popup is still behind (I can see it because the second popup is smaller)
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
}
$('#try-1').click(function(e) {
$("#sign_up").lightbox_me({centered: true, onLoad: function() {
$("#sign_up").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign1').lightbox_me({centered: true, onLoad: function() { $('#sign1').find('input:first').focus()}});
}
$('#try-2').click(function(e) {
$("#sign1").lightbox_me({centered: true, onLoad: function() {
$("#sign1").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
I am very new to jquery and have basically been trying to copy and tweak current code but to no joy.

jQuery UI dialog issue

I'm trying to create jquery dialog, but there is no use :(
here is my jQuery code:
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
New
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
and on my page I see all the fields from the form.
so what is my problem?
Try this: Working demo http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
rest please feel free to play around with demo & hope it helps the cause :)
scripts
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
​
Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.
The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:
$('.ui-dialog-content').dialog('destroy');

Categories

Resources