I am trying to implement smooth div scroll, the "Clickable Logo Parade" in particular: http://www.smoothdivscroll.com/clickableLogoParade.html
And I got it working in a blank page perfectly exactly the way I want it to, but when I insert it in my current layout it doesnt work properly.. I am assuming something is interfering with it?
Any help?
This is what I added into my css:
#logoParade
{
width: 628px;
height: 75px;
position: relative;
}
#logoParade div.scrollableArea a
{
display: block;
float: left;
padding-left: 10px;
}
This is the jQuery I have added:
<script type="text/javascript">
$(document).ready(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</script>
And these documents im including:
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version (3.0.6) of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinectic (1.5) used for touch scrolling -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
As well as of course actual jquery..
I uploaded me trying to implement it here you can have a look:
http://www.mintystudios.co.uk/clients/naghmeh/
And here is working version in a blank page..:
http://www.mintystudios.co.uk/clients/naghmeh/1/
Anyone know why it isnt working in the implemented version?
This should solve your problem; replace it with your script.
<SCRIPT type="text/javascript">
jQuery(function ($) {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
</SCRIPT>
Related
I am trying to implement a back-to-top button with js in bootstrap 4 using the fontawesome icon-set. A week ago it worked perfectly, but ever since I changed a few other things on the site it stopped working. It is probably a simple error, but I am new to js and don't know how to fix this...
This is my code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
.back-to-top {
position: fixed;
bottom: 25px;
right: 25px;
display: none;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100rem;">test</div>
<a id="back-to-top" href="#" class="mr-m2b btn btn-primary btn-lg back-to-top" role="button">TOP<i class="fas fa-chevron-up"></i></a>
it used to work perfectly, yet I broke it somehow and I am not sure how...
The javascript seems to be the problem as it does pretty much nothing, the question is why? And why did it use to work before, but doesn't now, when I did not touch the function at all?!
edit:
I recently deleted a custom scrollbar
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #A1394F;
outline: 1px solid slategrey;
}
but copying that back in doesn't help either. The exact same, copy-pasted js code works in the code snippet here, but not on my html page... What am I missing?
its work in example, if your code is not working in your project try this.
// body only instead "body, html" or create id and put in body <body id="top">
then edit js into document.querySelector('#top').scrollIntoView({ behavior: 'smooth' });
or try this super smooth http://iamdustan.com/smoothscroll/
JS
// Go to Top
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 800) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll to top
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('body').scrollIntoView({ behavior: 'smooth' });
});
});
I managed to fix it by copying the js script and pasting it again at the end of the body section. The problem was caused by a wrong import order and not a code or version error. Jquery 3.3, 3.4 and 3.5 all work fine if the import order is correct.
It feels dumb to say it out loud, but a script that requires jquery can obviously not work if it is added before jquery is imported ...
So my scripts now look like this:
<script src="{% static 'jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'popper1.16.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function() {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
I'm trying to change the CSS image error position on required form input
The gray and blue are set using CSS and setfocus but what I need is a javascirpt or jquery to set CSS image to red on error. Having a hard time figuring the error handling process out.
OK got it working with this:
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<style type="text/css">
#docs {
display: block;
position: absolute;
bottom: 0;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
errorElement: 'div',
rules: {
field1: {
required: true,
minlength: 5
},
field2: {
required: true,
minlength: 5
}
},
submitHandler: function(form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
});//]]>
</script>
Without seeing the code, it's hard to suggest anything.
But actually you can modify the image(background-image) using CSS itself.
Have a look at this example:
HTML
<div class="msg_box">
<span class="msg_icon"></span>
<input type="text" />
</div>
<div class="msg_box success">
<span class="msg_icon"></span>
<input type="text" />
</div>
CSS
.msg_icon{
background-image: url('https://cdn4.iconfinder.com/data/icons/black-white-social-media/32/mail_email_envelope_send_message-32.png');
width: 32px;
height: 32px;
display: inline-block;
}
.success .msg_icon{
background-image: url('https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/mail-32.png');
}
JSFiddle Link
Here the background image of the icon is changed when the parent container is having the success as class name! Here, we used the CSS selectors to modify the image. No need of jquery/javascript. But in your case, we won't be able to suggest anything until we see the code!
I have an issue with my code, I'm trying to create a function to hide and show a div
and it's working, but it dosnt work at first, It works only on the second click, so i have to click the link first to get it to start working properly, how can i fix it so that it works on first click?
more info:
im trying to have a div appear and then disapear usin the display and hide functions, the catch is i also want it to disapper when im outside of the div, if its visible, its all working but the problem is when i first load the page thn click the link to display the div, it dosnt appear, only when i click it a second time does it appear. this is the problem i want to fix
this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.foggy.min.js"></script>
<style>
body {
background: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100%;
color: white;
font-family: 'Segoe UI';
font-size: 24px;
}
.box
{
width: 100%;
margin: auto;
top: 0px;
left: 20%;
right: 0px;
bottom: 0px;
background-color: white;
opacity: 0.4;
position: fixed;
overflow-y: scroll;
overflow-x: scroll;
}
</style>
</head>
<body>
<script lang="en" type="text/javascript">
$(document).ready(function () {
});
$(document).mouseup(function (e) {
var container = $("#boxwrapper");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if (container.is(':visible'))
Hide();
}
});
function Display() {
$("#boxwrapper").show();
$("#boxwrapper").addClass("box");
$("#main").foggy();
}
function Hide() {
$("#boxwrapper").hide();
$("#main").foggy(false);
}
</script>
<div id="main">
Display Div
</div>
<div id="boxwrapper">
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Why don't you use click() method insead of mouseup()?
$('a').click(function (e) {
var container = $("#boxwrapper");
if (container.is(':visible')) {
Hide();
} else {
Display();
}
return false;
});
If you don't want to bind this event to every <a> on your site, add class to your element and bind click to this class. E.g.:
Display Div
and then in your script:
$('a.divToggle').click(function (e) { });
See this working fiddle
JavaScript
function display() {
if ($('#boxwrapper ').css('display') === 'none') {
$('#boxwrapper').show();
} else {
$('#boxwrapper').hide();
}
}
The issue could be a whitespace or anything, since is very hard to reproduce it, but here some advices or things that could be causing the issue:
Organize your code
First of all, you need to organize your code and load the JS libraries at the end of the file or wrap your functions inside the $(document).ready.
If you are using jQuery already, why to use the onClick event on the element itself if you can do it with jQuery.
Instead of all code inside the document mouseUp event, you could just add display: none in the css to #boxwrapper.
Instead of Hide() and Show() functions, you could just use toogleClass('box') jquery function
Difference between Click and MouseUp events
With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer. A click event requires the mousedown and mouseup event to happen on that element.
Prevent Default Maybe?
You are not preventing Default on your click event. You can do it like:
Display Div
I've been trying to use JqueryUIs resizable to create resizable divs like on jsfiddle for example. Jsfiddle makes use of JqueryUI resizable with handles so that you can expand the code editor or the output area displaying the dhtml results (a design etc). I've just about tried every solution given to others who experience problems working with jquery ui's resizble. Is there a way to create a resizable div with CSS only and have a custom handle? I've tried this as well and it's not working either http://blog.softlayer.com/2012/no-iframes-dynamically-resize-divs-with-jquery/ but it's what I'm looking for; two divs, one containing the main content and the other containing sidebar stuff. I made a fiddle quickly of that solution given here: http://jsfiddle.net/asx4M/1/ I would appreciate it if someone could tell me what it is I'm doing wrong or provide me with another solution for what I'm trying to do.
here's the code as well:
<!DOCTYPE html>
<html>
<head>
<style>
#sidebar {
width: 49%;
}
#content {
width: 49%;
float: left;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
});
});
</script>
</head>
<div id="sidebar">
<div class="sidebar-menu">
<!-- all your sidebar/navigational items go here -->
</div>
</div>
<div id="content">
<!-- all your main content goes here -->
</div>
$('#content).width(1224-setWidth);
$('.menu).width(setWidth-6);
Should be
$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);
The problem is with the quotes that you have not closed. for menu class and content id
$(document).ready(function() {
$( "#sidebar" ).resizable({
});
$("#sidebar ").bind("resize", function (event, ui) {
var setWidth = $("#sidebar").width();
$('#content').width(1224-setWidth);
$('.sidebar-menu').width(setWidth-6);
});
});
I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>