logo
down
shadow

Replace an img src on scroll


Replace an img src on scroll

By : Hélder
Date : October 17 2020, 01:08 AM
help you fix your problem I am trying to replace logo-text-black src attribute so that the svg img changes as the user scrolls. Is it possible to add this to my current script? , To replace image source you may use jQuery .attr method:
code :
var initialSrc = "img/logo.svg";
var scrollSrc = "img/logo-text-black.svg";

$(window).scroll(function() {
   var value = $(this).scrollTop();
   if (value > 100)
      $(".logo").attr("src", scrollSrc);
   else
      $(".logo").attr("src", initialSrc);
});
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
    <a href="#top"><img class="logo" src="img/logo.svg"></a>
 </div>
</nav>


Share : facebook icon twitter icon
Want to replace browser scroll bar with my own

Want to replace browser scroll bar with my own


By : Houda Mekouar
Date : March 29 2020, 07:55 AM
seems to work fine Styling the scrollbar isn't part of any standard and it's implemented differently in different browsers. You'll therefore want to use some JavaScript code to ensure your styles are applied consistently across browsers. Check out jScrollPane, a jQuery plugin.
AJAX replace and scroll sideways

AJAX replace and scroll sideways


By : user3033796
Date : March 29 2020, 07:55 AM
hope this fix your issue Creating sliding panel is relatively easy. First you create a container with a fixed width that will hide the overflow. Then you have a moving panel, with a large width of i.e. 5000px and inside content each contained in a div.
HTML
code :
<div id="container">

    <div id="panel">
        <div>Content 1</div>
        <div>Content 2</div>
    </div>

</div>
#panel div {
    width: 300px;
    border: 1px solid black;
    float: left;
    height: 350px;
}

#panel {
   width: 5000px;
}

#container {
    overflow: hidden;
    width: 302px;
}
$(document).ready(function() {

    $('#panel').delay(2500).animate({
        marginLeft: '-=302px'
    }, 500);

});
replace image in div on scroll down

replace image in div on scroll down


By : Andrew Braunstein
Date : March 29 2020, 07:55 AM
With these it helps UPDATE ANSWER
Check here, working DEMO http://jsfiddle.net/yeyene/49HA3/1/
code :
$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('#topbar, .cart-label').fadeOut('slow');
            $('#logo-img img')
                .css({'width':'184px','height':'33px'})
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/resized.png');
        }
        if($(this).scrollTop() < 100) {
            $('#logo, #topbar, .cart-label').fadeIn('fast');
            $('#logo-img img')
                .css({'width':'184px','height':'60px'})    
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/logo2.png');
        }
    });
});
How to temporary replace the main-scroll with inner div scroll

How to temporary replace the main-scroll with inner div scroll


By : rahul
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , , try this one:
code :
$(function(){
    $(document).scroll(function(){
        $('#wrapper').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});
html, body {
    padding:0;
}

body {
    height:3000px;
}

#wrapper {

    height:300px;
    overflow:scroll;
    background-color:yellow;
    top:100px;
}
Replace vertical scroll by horizontal scroll vanilla javascript

Replace vertical scroll by horizontal scroll vanilla javascript


By : Jaswinder
Date : March 29 2020, 07:55 AM
like below fixes the issue If you want to only effect the mouse wheel event you can try using the "wheel" event. This works in Firefox and Chrome from my testing. Not IE (edit: actually the event does fire just the method I used to scroll doesn't seem to work so you could possibly get this to work in IE as well).
Then use event.deltaY to determine if the scroll was vertical and prevent it. Also use the direction of event.deltaY to scroll some direction horizontally instead (I Multiplied by 5 because it seemed a bit slow but you can change the scroll amount to w/e).
code :
    /* We define our function  */
    function replaceVerticalScrollByHorizontal(event) {
    	if (event.deltaY != 0) {
      	// manually scroll horizonally instead
        window.scroll(window.scrollX + event.deltaY * 5, window.scrollY);
        
        // prevent vertical scroll
      	event.preventDefault();
      }
      return;
    }

    /* Listener on window once we start scrolling, we run our function  */
    window.addEventListener('wheel', replaceVerticalScrollByHorizontal);
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
Related Posts Related Posts :
  • Use html link to open javascript modal
  • Check if text input is not empty
  • How do I validate start time and end time using select
  • Form submit is not prevented when trying to integrate VueJS with SemanticUI
  • Should i install node and npm if i am not a node programme but i want to use bower?
  • ng-view does not get the data from href?
  • THREE.js - Graphical Glitch with an imported model
  • ViewModel current state to JSON
  • How to stop multiple row highlighting
  • Custom input element in native form
  • Angular service unable to execute function
  • Enable/disable input field depending on array length in Angular 1.5
  • Angular Load Json Error
  • how is dart compiled into javascript?
  • How to create dynamic radio button using javascript
  • Nodejs/Express - Error: Can't set headers after they are sent
  • javascript remove all elements :Uncaught SyntaxError: Unexpected identifier
  • onchange event of text box not working if i change text value dynamically
  • Determine the position of the view port scroll bar
  • Uploading file on site from DropBox
  • How to change the legends from vertical view to horizontal view?
  • Recursive function to create a tree
  • How to apply my class from css to checkbox?
  • If statement on every case within switch
  • checking JSON Data contains media or not..?
  • Binding a list with deviders to the DOM AngularJS
  • Extra blank space is including in dynamic dropdown in angularjs
  • How do I only update one value of my reducer in Redux?
  • Display embedded PDF in Internet Explorer 11 from binary string or base64
  • Convert String to nested array of characters
  • Angular 2 HTTP get handling 404 error
  • Single page with multiple states controlled by URL
  • call prototype method inside callback function of prototype method
  • How To Put Values Dynamically
  • I have custom google map multiple markers.when i am using reverse geolocation for multiple marker
  • Use casperjs to get all links from a page
  • Modify url path without redirection
  • Jquery "hasClass" not working
  • how to change col-span when a data is added to html table cell
  • Stopping links inside of a table from marking table row as selected
  • Angular 1.4 ng-if and ng-repeat to menu
  • Sending a list of checkboxes via Ajax to Django
  • ng-model not updated from controller to view
  • Node command is not working in cmd after installing node on windows?
  • Delay part of the funcion execution JavaScript and exit function
  • JS addition game: how do I display 4 possible answers, 3 of them are random and 1 is the correct answer ? (Codepen inclu
  • getting perplexed about this code, not seeing any thing wrong, but not printing out what i'm expecting
  • Ajax.beginForms MVC Partial View
  • Mouse-wheel direction not working
  • vanilla js remove id box
  • How to change text to upper case or lower case depending on string length in Angular 1.5?
  • issues with autocomplete inputs values
  • Angular 2/Typescript Delete Object On Button Click
  • Angular 2 ngFor can't show one object by index
  • The HTML Form of my website don't send the infos anywhere
  • Returning value from one method to second in callback within object
  • KonvaJS: How to serialize object with custom property?
  • What are the reasons for use static contextTypes = {} in react components?
  • element.changedTouches[0] error undefined. Chrome bug?
  • Focus issue of cursor on Internet Explorer
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com