logo
down
shadow

jQuery/javascript not producing desired effect?


jQuery/javascript not producing desired effect?

By : user2955784
Date : November 22 2020, 10:48 AM
it should still fix some issue You're running into a TypeError: jQuery.browser.mobile is not a function
cause the script you're using is not a function so does not accepts arguments either:
code :
var isMobile = $.browser.mobile; // boolean true/false


Share : facebook icon twitter icon
jQuery .next('td').text() not having desired effect

jQuery .next('td').text() not having desired effect


By : Ana
Date : March 29 2020, 07:55 AM
this one helps. You need to target the parent (td) of your img before calling next(). $(this).parent().next('td').text();
sum of numbers not having desired effect jquery

sum of numbers not having desired effect jquery


By : 345
Date : March 29 2020, 07:55 AM
like below fixes the issue I'm relatively new to javascript/jQuery and I'm having trouble getting my expected outcome. I would like the total to be shown even if only one input has a value, otherwise I want 0 to be shown. However right now it requires all 3 values to be input before it will show the sum. It will not simply add the next input onto the total as I type into an input. I can imagine a series of lengthy conditional statements that would cross check each input for .length and return the total based on each input. Surely there has to be an easier/cleaner way. If this were java I would use total += (variable) and it would total them as I went. That doesn't seem to work here. , Try
code :
$('#invoice_labor, #invoice_materials, #invoice_other').keyup(function() {  
    updateTotal();        
});     
var updateTotal = function () {
    var input1 = parseFloat($('#invoice_labor').val()) || 0;
    var input2 = parseFloat($('#invoice_materials').val()) || 0;
    var input3 = parseFloat($('#invoice_other').val()) || 0;
    var total =  input1 + input2 + input3;      
    $("#invoice_total").html(total.toFixed(2));         
};  
jQuery UI .scale() effect producing odd positioning jumps

jQuery UI .scale() effect producing odd positioning jumps


By : Jim Nolan
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Fiddle here. , Try 'scale': 'box' option for scale effect.
code :
var box = $('.box');
box.data('size', {'w': box.width(), 'h': box.height()});
box.show(scale_effect(box, 100, 250, function () {
    box.stop().effect(scale_effect(box, 80, 100, function () {
        box.stop().effect(scale_effect(box, 100, 100, function () {
            box.stop().effect(scale_effect(box, 90, 100, function () {
                box.stop().effect(scale_effect(box, 100, 100, function () {
                }));
            }));
        }));
    }));
}));

function scale_effect(box, percent, duration, complete) {
    box = $(box);
    var size = box.data('size');
    var absolutePercent = percent * size.w / box.width();
    console.log(absolutePercent);
    return {
        'effect': "scale", 
        'percent': absolutePercent,
        'scale': 'box',
        'duration': duration, 
        'queue': false,
        'complete': complete
    };
}
$('.box').bouncedScale([
    {'percent': 100, 'duration': 250},
    {'percent': 80, 'duration': 100},
    {'percent': 100, 'duration': 100},
    {'percent': 90, 'duration': 100},
    {'percent': 100, 'duration': 100},
]);
desired effect using jquery/CSS

desired effect using jquery/CSS


By : mint
Date : March 29 2020, 07:55 AM
hop of those help? I am trying to get the effect of moving background image on a section like in below website. , You can do it using CSS:
code :
background-attachment: fixed;
jQuery is not producing desired output on page

jQuery is not producing desired output on page


By : Hitesh Kumar
Date : March 29 2020, 07:55 AM
Hope that helps $(this).children('overlay') is wrong in your code, there is no tag by name overlay, you want to select the element with class overlay so you will need to use .overlay.
code :
$(document).ready(function () {

  //mouseenter overlay
  $('ul#gallery li').on('mouseenter', function () {

    // Get data attribute values
    var title = $(this).children().data('title');
    var desc = $(this).children().data('desc'); 

    //validation
    if (desc == null) {
      desc = 'Click To Enlarge';
    }

    if (title == null) {
      title = '';
    }

    //Create overlay div
    $(this).append('<div class="overlay"></div>');

    //Get the overlay div
    var overlay = $(this).children('.overlay');

    // Add html to overlay
    overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>');

    // Fade in overlay
    overlay.fadeIn(800);
  });

  $('ul#gallery li').on('mouseleave', function () {

    //Create overlay div
    $(this).append('<div class="overlay"></div>');

    //Get the overlay div
    var overlay = $(this).children('.overlay');

    //Fade out overlay
    overlay.fadeOut(500);
  });

});
body{
  background-color: white;
  font-family:Orbitron;
  color:white;
}

.fa-stack-overflow{
color: #f48024
}

.fa-github{
color:rgb(102,43,129);
}

.fa-linkedin{
color:rgb(0,127,178);
}

.fa-facebook-official{
color:rgb(59, 89, 153);
}

.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}


.block{
  background-color: #337ab7;
  opacity: .7;
  padding:10px;
  width:50%;
  margin-right: auto;
  margin-left: auto;
  border-radius:5px;
}


h1{
  padding:0;
margin-top: 0px;
font-size: 5.0em;
}

.btn-default{
font-size:1.7em;
color:#337ab7;
}


.pageOne{
  background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-repeat: none;
  background-size: cover;

  height: 1000px;

}

/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}



/*
parallax effect end
*/

.pageTwo{
background: white;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
background-attachment: fixed;
}

.pageTwoblock{
border-radius:5px;
}

.boxed{
  font-size: 1.7em;
text-align: center;
margin-right: auto;
margin-left: auto;
}




.me{
height: 850px;
  display:block;
  margin-right: auto;
  margin-left: auto;

}

.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}

.container{
  width:80%;
  margin:auto;
  overflow:auto;
}

section{
  padding:20px 0;
  overflow:hidden;
}

#gallery{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#gallery li{
  display: block;
  float: left;
  width: 23%;
  cursor: pointer;
  border: 5px;
  box-sizing: border-box;
  margin: 0 12px 7px 0;
  position: relative;
}

#gallery img{
  width:100%;
  border-radius:5%
}



.pageFour{
  background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  background-repeat: none;
  background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}
<html>
  <head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">

</head>
<body>
<div class="pageOne text-center">
  <ul class = "nav nav-pills">
<li>
  <a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
  <a href="#p4">Contact Me</a>
</li>
<li class="pull-right">
  <a href="#p3">Portfolio</a>
</li>
<li class="pull-right">
  <a href="#p2">About Me</a>
</li>
</ul>

<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
  <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow"  aria-hidden="true"></i>Stack Overflow</a>
  <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github"  aria-hidden="true"></i>GitHub</a>
  <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin"  aria-hidden="true"></i>Linkedin</a>
  <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official"  aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
      <h2>Daniel Collins</h2>
<div class="boxed">
      <p>
        I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
         different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering
         (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
    </div>
    </div>
    </div>
    </div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
  <h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container">
  <h1 id="heading">Projects</h1>
  <ul id="gallery">
    <li data-title="Project 1" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 2" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 3" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 4" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 5" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 6" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 7" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
    <li data-title="Project 8" data-desc=""><a href=""></a> <img src=https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb></li>
  </ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">

</div>
   </body>
</html>
Related Posts Related Posts :
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • store newline character with string in a variable
  • MP4 videos in Flowplayer does not play in Windows 7 Chrome
  • jquery focusin event not firing
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org