LARAVEL 5.8 : Window onscroll, scroll not working in blade template - javascript

My laravel 5.8 app cannot use the scroll function and I don't know why.
My code is in app.blade.php
<script src="{{ asset('asset\js\jquery.min.js') }}"></script> // 3.3.1
.
.
<script>
window.onscroll = function () {
console.log('scroll')
};
</script>
.
.
.
</body>
What I have tried
$(document).ready(function() {
$(window).scroll(function() {
console.log('scroll')
})
})
It is still not working. What did I do wrong?

try scrollIntoView
function scrollToC() { divC.scrollIntoView(); }
window.onscroll = function () { console.log('scroll') };
html { scroll-behavior: smooth; }
.block { height: 1000px; width: 300px; margin: 20px; background: yellow; )
<button onclick="scrollToC()">Scroll to C</button>
<div id="divA" class="block">a</div>
<div id="divB" class="block">b</div>
<div id="divC" class="block">c</div>

Add this code in your app.blade.php
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function() {
console.log('scrolled');
console.log(window.pageYOffset);
});
});
</script>
</head>
<body>
<div id="app" style="height:1000px;">
<!-- your contents -->
</div>
</body>

Related

How to track DOM modification by JS or Jquery?

On my website, after loading a page, CSS height is adding to the DOM and I am unable to find from where it was modified. Is there any way to debug it?
Below is the demo example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.div { border: 1px solid; }
</style>
</head>
<body>
<div class="div"> <b>hello</b> </div>
<script>
$(document).ready(function(){
$('.div').css("height", "200px");
$('body > div').css("height", "200px");
});
</script>
</body>
</html>
DOM can modify from any file and in any way. How can I debug it on a large website?
Thank you.
You can observe all changes in the DIV element by using MutationObserver.
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.attributeName);
});
});
observer.observe($('#test')[0], {childList:true, attributes:true});
//test
$('#test').height("50px")
setTimeout(function(){$('#test').height("100px")},3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord
You can listen to any resize on your element by ResizeObserver
$(document).ready(function () {
$('.div').css("height", "200px");
$('body > div').css("height", "200px");
});
new ResizeObserver((e) => {
console.log("cahnged");
}).observe($('.div')[0])
.div {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="div"> <b>hello</b> </div>

Jquery - hover changes to click after several resizes

I am trying to build a basic tab-navigation. When I hover about a tab (step), then the background of the tab gets green.
But after several hovers/resizes of the browser, hover doesnt't work anymore. Then I have to click on the tab in order to get the green background. It kind of freezes.
Thats the jsFiddle:
https://jsfiddle.net/rob_the_mob_87/L84kyym1/
Here is my minimal code:
index.html
<html>
<head>
<title>Tabs</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/static.js">
</script>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>
</body>
</html>
main.css
.process_step{
}
.active{
background-color: green;
}
static.js
$(document).ready(function () {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function () {
$('.process_step').each(function() {
$(this).hover(function () {
var clickedStepId = $(this).attr('id');
openStep(clickedStepId);
});
});
}
this.openStep = function (clickedStepId) {
$('.process_step').each(function() {
var stepId = $(this).attr('id');
if (stepId == clickedStepId) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
check this snippet below. i think it is what you want..
$(document).ready(function() {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function() {
$('.process_step').each(function() {
$(this).on('mouseenter',function() {
$(this).addClass('active');
});
$(this).on('mouseleave',function() {
$(this).removeClass('active');
});
});
}
.process_step {}
.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>

I currently am learning jquery and I am unable to get it to work on my website

ultimately like my html to point to a file which contains either the jquery compressed or uncompressed source code which I have downloaded from the jquery site so that I am able to use the jquery scripts. I very new to programming so please excuse my poor coding structure. you may either find my code by following this link https://repl.it/H8eo/25 or by going
http://felipeiscoding.com/main/HTML_Files/jqueryTesting.html
and looking at the existing source code here.
bad code here >>
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.compressed.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<style>
body {
background-color: black;
}
#square {
width: 200px;
height: 200px;
background-color: white;
}
</style>
<script>
$(document)
.ready(function () {
alert("Im working!");
});
</script>
</head>
<body>
<div id="square">
</div>
<script type="text/javascript">
if (typeof jquery == "undefined") {
alert("Jquery is not installed");
} else {
alert("Jquery is installed correctly");
}
</script>
</body>
</html>
If you look in the console you can see
https://replit.org/data/web_project/2d978b375b293a397e1c8c0898c77572/jquery-3.2.1.compressed.js
fails to load. So it's not working because jquery isn't loaded.
Instead of typeof jquery you need to use window.jQuery
if (!window.jQuery) {
alert("Jquery is not installed");
} else {
alert("Jquery is installed correctly");
}
$(document).ready(function() {
alert("Im working!");
});
body {
background-color: black;
}
#square {
width: 200px;
height: 200px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="square">
</div>
<script type="text/javascript">
</script>

Webpage Jquery dropdown buttons not working

I am trying to make buttons for a webpage that you can hover the mouse over and a 'drop down like' box will appear next to it with links and information.
Here's a link to what it looks like: https://jsfiddle.net/kvbvLy4d/
After implementing this into the webpage I had the buttons stopped working. This is what I have:
(I have removed irrelevant code to minimize length - Let me know if you need me to post the full script)
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="resources/scripts/jquery-1.12.2.min.js"></script>
<script src="resources/scripts/jquery.cycle.all.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
$("#box1, #content1").on("mouseenter", function() {
$("#content1").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content1").is(":hover"))
$("#content1").fadeOut(); //hide();
});
$("#box2, #content2").on("mouseenter", function() {
$("#content2").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content2").is(":hover"))
$("#content2").fadeOut(); //hide();
});
</script>
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
</div>
</body>
</html>
css
(same for each box and content div apart from position)
#box {
position: absolute;
top: 23vw;
width: 10vw;
height: 10vw;
background-color: blue;
}
#content {
position: absolute;
top: 23vw;
left: 11vw;
width: 10vw;
height: 10vw;
background-color: red;
display: none;
}
Any help, better ways to do this or a link to a question that specifically answers this would be very much appreciated. Thanks!
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="resources/scripts/jquery-1.12.2.min.js"></script>
<script src="resources/scripts/jquery.cycle.all.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#box, #content").on("mouseenter", function() {
$("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content").is(":hover"))
$("#content").fadeOut(); //hide();
});
$("#box1, #content1").on("mouseenter", function() {
$("#content1").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content1").is(":hover"))
$("#content1").fadeOut(); //hide();
});
$("#box2, #content2").on("mouseenter", function() {
$("#content2").slideDown(); //.show();
})
.on("mouseleave", function() {
if (!$("#content2").is(":hover"))
$("#content2").fadeOut(); //hide();
});
});
</script>
<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
<div id="box1"></div>
<div id="content1">content here</div>
<div id="box2"></div>
<div id="content2">content here</div>
</div>
</div>
</body>
</html>
add your jquery functions inside document.ready

calling functions from asp.net mvc 3 to nailthumb

I've just downloaded the nailthumb project from http://www.garralab.com/nailthumb.php but I cant call this function from asp.net mvc 3 of js.
the functions in the examples are called as follow:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({
width:100,height:100,method:'resize',fitDirection:'top left'});
});
</script>
I've tried:
<script type="text/javascript">
$(document).ready(function () {
$('#nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
The js file loads but I cant figure out how to call this functions.
Any Ideas?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.css" type="text/css"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<style type="text/css" media="screen">
.square-thumb {
width: 150px;
height: 150px;
}
</style>
<div class="nailthumb-container square-thumb">
<img alt='' src='#Url.Action("Show", "ConsultorioImagenes", new { id = Model.ID})' />
</div>
You're using the id selector (#) when you're assigning it a class.
This line:
<div class="nailthumb-container square-thumb">
..assigns the nail-thumb-container class. You need to use the class selector (.) in your jQuery call:
<script type="text/javascript">
$(document).ready(function () {
$('.nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
You have <div class="nailthumb-container square-thumb">
and $('#nailthumb-container').nailthumb({
It should be $('.nailthumb-container').nailthumb({

Categories

Resources