Simple JQuery working in some areas, not in others - javascript

After I added a slideshow to the site I am working on, some web components that use Jquery stopped working. However the newly added slideshow that also uses JQuery works as expected.
After some debugging, I found out exactly what JQuery is working and what isn't from the code below. I added a comment to my code to indicate that point.
I am importing my jquery library in the header and the code below is the last code before the closing <body> tag.
<!--SLIDESHOW-->
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
if (value == 'dots_preview') {
$('.border_box').css({'marginBottom': '40px'});
options['dots'] = true;
options['preview'] = true;
}
else {
options[value] = true;
if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
}
}
}
$('.box_skitter_large').skitter(options);
// Highlight
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
//**** everything above works, everything below this point does not! ****/
$(".expandButton").click(function(ev){
$(ev.target).closest(".company-container").find(".expand").css("height", "140px");
$(ev.target).closest(".company-container").find(".expand").toggle("fast");
});
$(".emailLink, .email-popup").click(function(e){
e.stopPropagation();
$(e.target).closest(".company-container").find(".expand").css("height", "140px");
$(e.target).closest(".company-container").find(".email-popup").show("fast");
$(e.target).closest(".company-container").find(".phone-popup").hide();
$(e.target).closest(".company-container").find(".address-popup").hide();
});
$(".addressLink, .address-popup").click(function(e){
e.stopPropagation();
$(e.target).closest(".company-container").find(".expand").css("height", "550px");
$(e.target).closest(".company-container").find(".address-popup").show("fast");
var address = $(e.target).closest(".company-container").find(".address").html(); //get address text
if(!($(e.target).closest(".company-container").find(".map").length)){ //check if it was loaded
$(e.target).closest(".company-container").find(".address-popup").html('<iframe class="map" style="margin-top:45px;" width="575" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='+ address +' &aq=&ie=UTF8&hq=&hnear='+address+'&t=m&z=14&iwloc=A&output=embed"></iframe>');
}
$(e.target).closest(".company-container").find(".email-popup").hide();
$(e.target).closest(".company-container").find(".phone-popup").hide();
});
$(".phoneLink, .phone-popup").click(function(e){
e.stopPropagation();
$(e.target).closest(".company-container").find(".expand").css("height", "140px");
$(e.target).closest(".company-container").find(".phone-popup").show("fast");
$(e.target).closest(".company-container").find(".email-popup").hide();
$(e.target).closest(".company-container").find(".address-popup").hide();
});
$(document).click(function(e) {
if (!(e.target.class === "email-popup" || e.target.class === "phone-popup")) {
$(".email-popup, .phone-popup, .address-popup").hide("fast");
}
$(".expand").css("height","140px");
});
$(".tagKeyword").hover(function(){
$(this).css("background-color","#fff");
$(this).css("color","blue");
$(this).css("box-shadow","none");
});
$(".tagKeyword").mouseleave(function(){
$(this).css("background-color","#eee");
$(this).css("color","#556");
$(this).css("box-shadow","1px 1px 2px #ccc");
});
$(".search-container").hover(function(){
$(".search-container").css("background","url(./images/menu/menu-middle.png)");
});
$(".searchfield").Watermark("search");
});

Can you try this?
$(".expandButton").click(function() {
$(this).closest(".company-container").find(".expand").css("height", "140px");
$(this).closest(".company-container").find(".expand").toggle("fast");
});
This may not help at all, but I didn't see the need for ev here and to instead use this.

May be you need to double check ev variable:
ev = ev || window.event

Related

If an input contains custom word, hide the button

I have an input[type=text] area and i'll paste/type a URL in it.
If pasted/typed url contains http, i want to hide $('#button') element.
If its not, keep showing the button also.
Thanks for any help.
Here is my demo code so far:
$('#pasteUrl').on('input', function () {
var str = $('#pasteUrl').val();
if (str.indexOf("http") !== -1) {
$('#button').hide();
}
});
Edit: Added "propertychange" to events as suggested by OP in the comments.
$('#pasteUrl').on('input propertychange', function (ev) {
var str = $(ev.currentTarget).val();
if (str.indexOf("http") != -1) {
$('#button').hide();
} else {
$('#button').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pasteUrl" />
<button id="button">Go</button>
This is likely what you want - using toggle:
$('#pasteUrl').on('input propertychange', function() {
var str = $(this).val();
$('#button').toggle(str.indexOf("http") == -1);
});

Trying to define function inside html of popModal jQuery library

I am trying to copy the functionality of JSFiddle#1 into my JSFiddle#2
Brief Description of above two fiddles:
1) JSfiddle #1 : When a user selects third option from the dropdown menu, it displays the alert popup.
2) JSFiddle #2: I have tried to plug in the JSFiddle #1 code into this fiddle inside the html: $('#name_status_popup_dialog').html(), as shown in the fiddle (commented lines of code) but it doesn't work. The reason I am putting it inside html: $('#name_status_popup_dialog').html(), is because it is responsible for displaying the HTML contents in the dialog. Here is the documentation of html parameter used in the popModal library. Am I defining the function for the popup dialog correctly inside html() for JsFiddle #2? Please advise. Thanks
It's as simple as putting the code outside of html callback. See this Fiddle.
jQuery(function($) {
var id_value;
$(document).on('change', '#change_name_statusName', function checkSelection() {
const change_name_statusNameVal = this.value
console.log("Am I in change listner?");
if (change_name_statusNameVal == "First") {
id_value = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select third option?");
id_value = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value = 4000;
}
});
$("#change_name_status").click(function() {
$('#change_name_status').popModal({
html: $('#name_status_popup_dialog').html(),
onOkBut: function() {
var change_name_statusNameVal = $("#change_name_statusName").val();
if (change_name_statusNameVal == "First") {
id_value_ = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value_ = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select Third option?");
id_value_ = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value_ = 4000;
}
}
});
});
});
Also, notice that I attached the event listener on the document not the element itself since the element is dynamically generated.

show/hide div when user inputs text into text area?

I am trying to toggle a div so it shows and hides when a user enters text into textarea.
i am using the below code and its not working for me, can anyone please show me why? thanks
html:
<head>
<script>
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val() > 8) {
$('#cname2').toggle("slow");
}
});
});
</script>
</head>
<form>
<input type="text" id="cname" name="cname" class="field">
<div id="cname2"></div>
</form>
css:
#cname2{
width:30px;
height:30px;
position:absolute;
margin-top:-13px;
margin-left:400px;
background-image: url('tick.png');
background-repeat:no-repeat;
background-position:right;
display:none;
}
so apparently my above code doesnt work in IE 9, but i should be able to achieve what i am trying to do by using this code, but can someone please show me where i place my div ID/how i adapt it to work for me?
var activeElement = null;
var activeElementValue = null;
// On focus, start watching the element
document.addEventListener("focusin", function(e) {
var target = e.srcElement;
if (target.nodeName !== "INPUT") return;
// Store a reference to the focused element and its current value
activeElement = target;
activeElementValue = target.value;
// Listen to the propertychange event
activeElement.attachEvent("onpropertychange", handlePropertyChange);
// Override .value to track changes from JavaScript
var valueProp = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype, 'value');
Object.defineProperty(activeElement, {
get: function() { return valueProp.get.call(this); },
set: function(val) {
activeElementValue = val;
valueProp.set.call(this, val);
}
});
});
// And on blur, stop watching
document.addEventListener("focusout", function(e) {
if (!activeElement) return;
// Stop listening to propertychange and restore the original .value prop
activeElement.detachEvent("onpropertychange", handlePropertyChange);
delete activeElement.value;
activeElement = null;
activeElementValue = null;
});
function handlePropertyChange(e) {
if (e.propertyName === "value" &&
activeElementValue !== activeElement.value) {
activeElementValue = activeElement.value;
// Fire textchange event on activeElement
}
};
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val().length > 8) {
$('#cname2').show();
} else {
$('#cname2').hide();
}
});
});
One possible approach (demo):
$(document).ready(function() {
$("#cname").on('input', function() {
$('#cname2')[this.value.length > 8 ? 'hide' : 'show']('slow');
});
});
Here I assumed that in cname2 container there's some warning message, that has to be shown if length of text input is 8 or less characters. Note also that I've used oninput handler, not keyup: as it allows me to process mouse-driven cut-and-paste as well as direct input. The only drawback is that IE8 doesn't support this event (and IE9 support for it is rather buggy, as handler is not fired when character is removed from text input).
Use this Javascript function
var z = document.getElementById('cname');
z.onkeyup = function(){
document.getElementById('cname2').innerHTML = z.value;
}
Your HTML:
<input type='text' name='cname' class='field' id='cname'>
<div class='cname2' id='cname2'></div>
Checkout here: http://jsfiddle.net/iamsajeev/Q9LPv/
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val() > 8) {
$('#cname2').fadeIn("slow");
}
else
{
$('#cname2').fadeOut("slow");
}
});
});
http://jsfiddle.net/5EjP7/2/
I hope that helps
Try the following script:
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val().length > 8) {
$('#cname2').toggle("slow");
}
});
});

Placeholder code used for IE8 causing dropdown login field to lose focus

I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?
Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});
demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...
I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.

Placeholders in IE

I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.
instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')
For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')
<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>

Categories