- Screen name: dz.slick
dz.slick's Profile
33 Posts
66 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- 11-Apr-2018 12:23 PM
- Forum: Using jQuery
I am trying to set the value of the last input field in a group, to equal the values of its siblings. In this scenario, users can duplicate the group.
What I have tried so far does not work properly. If user duplicates the fields, only the last group works. Any ideas on how I can achieve this?
Please see code here on fiddle.
I am working on a live validation function. The problem is that the aftermath of the conditions in the function executes executes before the last part is met. The entry validation indicator should not turn green until the conditions are met, however this is not the case.
The indicator turns green after the third condition is met. It should not, until all conditions are met. Any suggestions on how I can solve this problem.
- I am trying to look the trough the display of a bunch of absolutely stacked elements, but it stops when it gets to the last one. My code looks like below: Any ideas on how I can get it to work?
- $(".box").each(function () {
- $(".box").click(function () {
- $(this).removeClass("retain").removeClass("back");
- $(this).addClass("back").delay(1000).queue(function(){
- $(this).removeClass("back").dequeue().addClass("retain");
- });
- });
- });
See complete working code on jsFiddle.
- 18-Jun-2017 06:14 PM
- Forum: Using jQuery
I am trying to combine the scroll functions below, but to no avail. E.G I tried defining $window only once but it breaks. my code looks like below.- var adistance = $('article.about-me').offset().top -90,
- $window = $(window);
- $window.scroll(function() {
- if ( $window.scrollTop() >= adistance ) {
- $("li.active").removeClass("active");
- $('li[href$="about-me"]').addClass("active");
- }
- });
- var edistance = $('article.education').offset().top -90,
- $window = $(window);
- $window.scroll(function() {
- if ( $window.scrollTop() >= edistance ) {
- $("li.active").removeClass("active");
- $('li[href$="education"]').addClass("active");
- }
- });
- var exdistance = $('article.experience').offset().top -90,
- $window = $(window);
- $window.scroll(function() {
- if ( $window.scrollTop() >= exdistance ) {
- $("li.active").removeClass("active");
- $('li[href$="experience"]').addClass("active");
- }
- });
- var pdistance = $('article.portfolio').offset().top -90,
- $window = $(window);
- $window.scroll(function() {
- if ( $window.scrollTop() >= pdistance ) {
- $("li.active").removeClass("active");
- $('li[href$="portfolio"]').addClass("active");
- }
- });
I am using the function on chibuezeokechukw.comto switch the active classes automatically.- 16-Dec-2016 08:37 PM
- Forum: Using jQuery
I am trying to find a custom attribute from a group of elemnts and them prints their values together. It doesn't seem to be working for me, it only pring one value. If use alert or console.log, it shows them all. My code looks like below.- $('.um-member-name').each(function(i, obj) {
- var n = $(this).attr('userEmail');
- $("h2").text(n);
- });
Any Ideas how I can solve this issue?
- I have been trying to stop a select2 dorpdown menu from flickering but to no avail. Any ideas why this is happening or how I can stop it from happening.
My code looks like b elow:- $(document).on('touchend', function(){
- $(".select2-search, .select2-focusser, #s2id_autogen4, .right [id*=focusser], .right [id*=autogen], .right [id*=foccused], .select2-search-choice-close").remove();
- });
It happens on the "min age" and "max age" fields on this page. on mobile devices- Trying to get jQuery to add current window width to URL on resize. It keeps reloading on mobile devices. How do I solve this problem. My code looks like below.
- $(window).bind('resize',function(){
- if (window.location.href.indexOf('reload') === -1) {
- window.location.replace(window.location.href+'?reload' + ($(window).width()));
- } else {
- window.location.replace('?reload' + ($(window).width())); // With current width
- }
- });
- Trying to do something when the content of a DIV changes and the new content is an "O" but it does not seem to work for me. My code looks like below. Any Ideas on how I can solve this problem.
- jQuery('.select2-chosen').bind('DOMSubtreeModified',function(event) {
- var newText = $(this).text();
- alert(newText);
- if ($('.select2-chosen:contains("O")').length === 1) {
- alert(newText);
- }
- });
It is the minum height inches field on this page- 31-Aug-2016 05:23 PM
- Forum: Using jQuery
I am trying to stop mobile keyboard from showing when the element on focus is a drop-down but it still does not work. My code looks like below. Any ideas how I can achieve this. The problem is only on mobile.
Please note that the HTML is structured the by author of the plugin that I am using. It is the "marital status field" on this page.
// jQuery
$("#s2id_autogen1").attr("readonly", "readonly");
// HTML
<div style="width: 100%; max-width: 1903px; display: block;" id="s2id_marital_status" class="select2-container um-form-field valid um-s1"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> <span id="select2-chosen-1" class="select2-chosen">Marital Status</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a> <label for="s2id_autogen1" class="select2-offscreen"></label> <input id="s2id_autogen1" aria-labelledby="select2-chosen-1" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text"> </div>
- I am trying to increase the words that are visible when user clicks on the link. It does not seem to listen to the click command. How can I achieve this? My code looks like below.
- $(document).ready(function () {
- var $wordCount = 12;
- $("h2").on("click", function () {
- var $wordCount = 112;
- });
- function getWords(str) {
- return str.split(/\s+/).slice(0, $wordCount).join(" ");
- }
- var str = $(".hider").text();
- $(".showHere").text(getWords(str));
- });
See work on fiddle- I'm trying to get the textarea that shares the same parent as the selected option to show, but all the textareas show when their own option is not selected. Any suggestion on how I can solve this. My code looks like bellow:
- $('#snitchBox').each(function (index, value){
- $(document).ready(function () {
- $("#snitchBox").hide();
- $('select#reportReason').on('change', function() {
- if ($(this).val() === 'Other') {
- $("textarea#snitchBox").show();
- } else {
- $("textarea#snitchBox").hide();
- }
- }).change();
- });
- });
- I'm trying to get a comand to run instantly when a user selects an option from the select options. My code looks like below.
- <select title="" name="marital_status" id="marital_status">
- <option value=""></option>
- <option value="Dating">Dating</option>
- <option value="Divorced">Divorced</option>
- <option value="Married" selected="">Married</option>
- <option value="In a Committed Relationship">In a Committed Relationship</option>
- <option value="Single">Single</option>
- <option value="Separated">Separated</option>
- <option value="Widowed">Widowed</option>
- </select>
- <h1>I believe in God</h1>
jQuery
- $(document).ready(function() {
- if ($('#marital_status option:slected').value == "Married") {
- $('h1').hide();
- }
- });
Fiddle linkWorking on a point system that assigns points for every element with matching content in a group of search results. It works well when I compare the contents from
.per-results
to.myself
, but it doesn't work when I do the comparison from .myself to .per-result.When reversed, it still assigns points but it assigns the same amount of points for all
.per-result
when it should differ. My code looks like below.$(function() { $('.per-result').each(function() { var $matches = $('span', this).filter(function() { // Each item var texts = $(this).text(); return $('.myself span').filter(function() { // Are there matches in .three? return $(this).text() === texts; }).length > 0; }).length; $('.theyRate', this).text(('They score me ' + $matches * 6 + ' Points' )); }); //Reversing the point system var $matches = $('.myself span', this).filter(function() { // Each item var texts = $(this).text(); return $('.per-result span').filter(function() { // Are there matches in .three? return $(this).text() === texts; }).length > 0; }).length; $('.iRate').text(('I score them ' + $matches * 6 + ' Points' )); });
Link to the fiddle
- 21-Oct-2015 03:21 AM
- Forum: Using jQuery
I have 300 plus list of items that I'd like to make easier for users to find what they are looking for. I want the element that contains what matches what the user types to move to the top of of the list or into another element at the top. my code looks like below. Any Ideas on how I can achieve that?See complete code here
- var $showYourself = $('.sort-plate').text;
- var $rollCall = $('input#sort-plate').text;
- $('button').click(function () {
- if ($showYourself === $rollCall) {
- $('.sort-plate').appendTo('#show-here');
- }
- });
- $(function () {
- $('.name').html(function (i, html) {
- return $.trim(html).replace(/(\w+)$/, '<span class="sort-by">$1</span>');
- });
- var $sortPlate = $("#plate");
- $sortPlate.find(".sort-plate").detach().sort(function (a, b) {
- return $(a).find('.sort-by').text().localeCompare($(b).find('.sort-by').text());
- }).appendTo($sortPlate);
- });
- I have a multiple alert system that display uniform alerts on all pages. I want when any of the alerts is closed, let it stay closed on all other pages on the website. I have tried so many thins but nothing works. It only. works when it is just one alert.
- // Alert session cookie starts here
- jg(document).ready(function () {
- function closeBox() {
- var closeBox = jg('.alert-box:visible').hide();
- // - Notice how we pass a function and get an integer
- jg.cookie('Alert-closed', true, {
- path: '/'
- });
- }
- console.log('Alert-closed');
- // - Simply checks the alert box above
- if (jg.cookie('Alert-closed')) {
- console.log('Closing the alert box automatically...');
- closeBox();
- }
- // Close the box on click
- jg('.alert-switch').click(function () {
- closeBox();
- });
- });
- I'm trying to compare orange and red boxes respectively to the green box, find LI's with matching contents and then assign points to them. With WHat I have so far, It doesn't asign the points correctly. E.g
1. The orange box shoud have 40 points because 4 ofs it Li contents all have matches in the Green box.
1. The orange box shoud have 430 points because 3 of its Li contents all have matches in the Green box.
How can I achieve this.
My code is as shown below.
- $(document).each(function () {
- var pMatch = $('ol li').map(function () {
- return $(this).text()
- })
- var sMatch = $('.three li').map(function () {
- return $(this).text()
- })
- $.each(pMatch, function (i, h) {
- if (h === sMatch[i]) {
- var uSp = $("ol li").eq(i).length * 10;
- $( "ol li:last-of-type" ).text( "" + uSp + " Points");
- }
- });
- I am trying to wrap each matching elment in a DIV. I.E every time an element in Group A matches an elemnt in Group B, wrap them both in a DIV. With the help of JΛ̊KE I was able find the matches but I can't find a way to wrap them. How Can I achieve this please.
My code looks like below
- $(document).each(function() {
- var pMatch = $('.one li').map(function(){
- return $(this).text()
- })
- var sMatch = $('.two li').map(function() {
- return $(this).text()
- })
- $.each(pMatch,function(i,h) {
- if (h===sMatch[i])
- $('.show-here').text('This is Working');
- else
- $('.show-here').text('This is not Working');
- });
- });
- Here is what I'm trying to achieve:
For each li in .one , search for li's in .two that has matching content, and then wrap them both in div. Any Ideas on how I can achieve this?
Below is my code so far.
- $(document).each(function() {
- var pMatch = $('.one li').contents();
- var sMatch = $('.two li').contents();
- if ($(pMatch === sMatch)) {
- $('.show-here').text('This is Working');
- }
- else {
- $('.show-here').text('This is not Working');
- }
- });
Aim: I'm trying to individualize a group of elements(alerts in this case) so that if any of them is closed on one page, it stays closed on all pages until the browsers is closed.
Issues: With the code below, they close independently when the user clicks on the close button(X) but show up again when the user refreshes the page or switch between pages and it also omits one of the available alerts. Any ideas on what I'm getting wrong here. Any ideas on what the problem is.
// Alert session cookie starts here $(document).ready(function () { function closeBox() { var $this = $('.alert-switch'); var closeBox = $('.alert-box').eq($(this).index()).remove(); $.cookie('alert-closed', true, {path: '/'}); console.log('Alert box closed.'); if($.cookie('alert-closed')){ console.log('Closing the alert box automatically...'); closeBox(); }} $('.alert-switch').on('click', function () { closeBox(); });
Here's a link to a replica of the issue on fiddle.
- I have the function below that switches DIV's between a given time interval. I'm trying to get it to pause when someone hovers over it. It switches as needed but it doesn't pause hover.
- $(function() {
- if($('.alert-box').length > 1 ) {
- setInterval(function(){
- if($('.alert-box').first().is(':visible')) {
- $(".alert-box:visible").hide().siblings().next().show();
- $('.alert-right-arrow').addClass('no-clicks');
- $('.alert-left-arrow ').removeClass('no-clicks');
- } else {
- $(".alert-box:visible").hide().prev().show();
- $('.alert-left-arrow').addClass('no-clicks');
- $('.alert-right-arrow').removeClass('no-clicks');
- }
- }, 6000);
- }});
- $('.alert-box').hover(function(){
- clearInterval();
- });
- Looking for a way to retain the action of the function below in all the pages. ie If the user triggers the action, let it "the action" be effective in all pages except when the users revisits the website. How can this be achieved?
- $(document).ready(function(){
- $(".alert-switch").click(function () {
- $(".alert-box").slideUp();
- $(".fa-times").hide();
- });
- });
The block of code below works perfectly until I added mouse over timeout. The mouse-over time out works but the classes are no longer being added. Is there a way to combine both and still have the classes added as supposed?
- $(document).ready(function(){
- var myTimeout;
- $('#nav-bar > ul li').mouseenter(function() {
- myTimeout = setTimeout(function() {
- $('.drop-down-plates:visible').hide();
- $('#nav-bar ul li.current-menu-item').removeClass('current-menu-item');
- $('#nav-bar ul li').eq($(this).index()).addClass('current-dmenu-item');
- $('.drop-down-plates').eq($(this).index()).slideDown();
- $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');
- }, 200);
- }).mouseleave(function() {
- clearTimeout(myTimeout);
- });
- $('#drop-down-box').mouseleave(function(){
- $('.drop-down-plates:visible').slideUp();
- $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');
- });
- });
- 14-Aug-2014 05:40 PM
- Forum: Using jQuery
I have multiples of ".container" and They're all shown one at a time. I'm trying to get the backgroundof the parent DIV to change depending on the visible ".container" . but it doesn't work. Any ideas on how this can be achieved?
HTML
- <div id="main">
- <div class="prev">Previous</div>
- <div class="next">Next</div>
- <div class="container active">One</div>
- <div class="container">Two</div>
- <div class="container">Three</div>
- <div class="container">Four</div>
-
- </div>
- .prev, .next {
- float: left;
- color:blue;
- font-size: 24px;
- margin: 10px 0 50px 50px;
- cursor:pointer;
- width: 40%;
- color: black;
- }
- .container {
- width: 100%;
- font-size: 70px;
- margin-bottom: 20px;
-
- }
- .container {
- display: none;
- }
- .container.active {
- display: inherit;
- }
-
jQuery
- $(".prev").on("click", function(){
- $(".container.active").removeClass("active").prev().addClass("active");
- var $prev = $('.container.active').removeClass('active');
- if ($prev.length) {
- $prev.addClass('active');
- }
- else {
- $(".container:last").addClass('active');
- }
-
- });
- $(".next").on("click", function(){
- $(".container.active").removeClass("active").next().addClass("active");
- var $next = $('.container.active').removeClass('active');
- if ($next.length) {
- $next.addClass('active');
- }
- else {
- $(".container:first").addClass('active');
- }
-
-
- });
- jQuery(document).ready(function(){
- if ($('.container:nth-of-type(2)').is(':visible')) {
- $('#main').css({'background' : 'red'});
- }
- else {}
- });
Here's a jsFiddle link- trying to get the function to only add the class ".floater" to the element that matches the criteria but it ends up adding it to all three .thumb-it's
HTML- <div class="thumb-it"></div>
- <div class="thumb-it"></div>
- <div class="thumb-it"></div>
Script
- $('.thumb-it').each(function() {
- if ($(this).find('img').length === 0) {
- $(this).hide();
- }
- else if ($(".thumb-it:contains('img')").length < 300) {
- $(this).addClass('floater');
- }
- });
- I've succeeded in slicing, adding classes, and grouping .old-post DIVs but I having problems getting them to show when the corresponding LI is clicked
For instance when the first LIs is clicked, let the first of .old-posts show. It disappears instead.
How can I get it to work?
My Code is as shown below.jQuery(document).ready(function ($) { $h = jQuery.noConflict(); console.log($h) $h('.old-post-box').slice(0,10).addClass('set1').wrapAll('<div class="overlay" />'); $h('.old-post-box').slice(10,20).addClass('set2').wrapAll('<div class="overlay" />'); $h('.old-post-box').slice(20,30).addClass('set3').wrapAll('<div class="overlay" />'); $h('.old-post-box:not(".set1")').hide(); }) jQuery(document).ready(function ($) { $h = jQuery.noConflict(); console.log($h) $h('#post-nav ul li').click(function(e){ $h('.old-post-box:visible').hide(); $h('.overlay').eq($h('#post-nav ul li').index()).show('slow'); }); })
- «Prev
- Next »
Moderate user : dz.slick
© 2013 jQuery Foundation
Sponsored by
and others.