I'm trying to do some things with Jquery and there seems to be something going wrong.
first off some code,
my HTML,
my CSS,
.scrollToTop {
width: 40px;
height: 40px;
line-height: 45px;
border-radius: 50%;
text-align: center;
background-color: #CFCFCF;
background-image: url(../img/upActive.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: fixed;
bottom: 61px;
right: 30px;
transition: opacity 2s ease-in;
}
.scrollToTop:hover {
background-color: #989898;
text-decoration: none;
transition: opacity 2s ease-in;
}
My Jquery,
$(document).ready(function() {
var hidden = $('.scrollToTop');
hidden.hide();
// Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
hidden.show(1000);
} else {
hidden.hide(1000);
}
});
// Click event to scroll to top
$('.scrollToTop').click(function(e) {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
JSfiddle: Fiddle (thanks vasilenicusor)
The problem is that all the buttons in my project dissapear after they have been clicked. I can see the ring arround them that my browser puts there, but the fysical button dissapears..
This problem does not seem to happen in the fiddle (the code is not working at all in the fiddle).
Does anyone know how I should fix this and maby what is the problem? I guess something in the Jquery code is making the buttons do this. (there are about 8 Jquery files with 100+ lines of code, most of them are library's).
The code below does not work. I've tried it.
(function(e)
{
e.preventDefault;
});
Thanks in advance!
Thanks Chun for your answer!
But what seems to be the problem in my code is there seems to be some library that is causing this "dissapear" effect when there is a "href" is the link. Removing the "href" temporally solved my problem.
You could just use href="javascript:void(0)" instead of href="#" onclick="return false;"
<!-- OR better -->
<a class="scrollToTop"></a>
<!-- OR even better -->
<span class="scrollToTop"></span>
and just give scrollToTop the attributes of a link with CSS for the markup without href, like:
.scrollToTop { cursor: pointer; color: blue; }
Having Link or Link or whatever else that contains an onclick attribute - was okay a couple of years ago, though now it can be a bad practice. Here's why:
It promotes the practice of obtrusive Javascript - which has turned out to be difficult to maintain and difficult to scale. More on this in Unobtrusive JavaScript.
There are now better, easier, and more maintainable and scalable ways of accomplishing the desired result.
The unobtrusive Javascript way
Just don't have a href attribute at all! Any good CSS reset would take care of the missing default cursor style, so that is a non-issue. Then in case you have a Javascript functionality to attach using graceful and unobtrusive best practices - which are more maintainable as your Javascript logic stays in Javascript, instead of in your markup - which is essential when you start developing large scale Javascript applications.
<a class="scrollToTop">Cancel this action</a>
// Cancel click event
$('.scrollToTop').click(function(){
alert('Cancel action occurs!');
});
.scrollToTop { cursor: pointer; color: blue; }
.scrollToTop:hover { text-decoration: underline; }
Update
I've also forget to say, change your scroll to top function for this instead:
// Click to scroll to top
$(".scrollToTop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
Check out jsfiddle example here: https://jsfiddle.net/x1x9pmpx
Related
I'm making a jquery mobile app and have a page that needs to filter some posts.
I have the posts put in as well as the design of the filter.
You can see what it looks like below:
I've been trying to animate it so if the user presses "social" on the right, "outside" and "business" will get pushed out to the left so the filter you have selected is always in the centre, between the two dividers.
Here's an example of the sort of js I was going to use to move the divs around but just for 1 div instead of 3:
$(function(){
var c=0;
$("#click").click(function(){
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});
The problem i was having is that if the user was to press the button on the right or left every time it would need to have an infinite number of divs sliding in and I was just wondering how to implement this.
Here's a jsfiddle with the assets I'm using (Without the jquery mobile styling)
https://jsfiddle.net/xczy346z/
EDIT: Here's also a gif of what I want to happen if you can't understand what I'm trying to make. Example Gif
Use this javascript
$(document).ready(function(){
$("#social_one").click(function(){
$("#side_scroll").animate({marginLeft: '-=130px'}, 500);
});
});
`
Theoretically, may I suggest that you remove your dividers (#divider_***), both from the html and css, and add them as a pseudo on the text_slider like this
#text_slider:after {
content: "";
position: absolute;
left: 33%;
top: 10%;
bottom: 10%;
width: 33%;
border-left: 1px solid white;
border-right: 1px solid white;
pointer-events: none;
}
Doing like this keeps the side_scroll clean and only the "buttons" to work with when animate.
Now you can simply just animate your side_scroll to right or left having the selected "button" in the middle no matter how many they will be.
Here is an updated fiddle of yours showing the pseudo:
I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.
My site has blog posts played out down the page… In the top right, I have navigation, with an option to jump to the last post in September. I know the id of the div that contains this post is #post2, so I'm trying to use jQuery to scroll the page to that div, like this:
$("html, body").animate(
{ scrollTop: $("#post2").offset().top },
500);
What could I be doing wrong?
You can utilize the window.scrollTo function, by calculating the according coordinates, but if you are using jQuery there are out-of-the-box ready plugins with smooth scrolling support like jquery.scrollTo.
Here a Code-Snippet that demonstrates it:
$(function(){
$('#btn').click(function(){
$.scrollTo('#post2', 800 );
});
});
div {
width: 200px;
}
#large {
height: 1500px;
background-color: grey;
}
#post2 {
height: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<button id="btn">scroll</button>
<div id="large"></div>
<div id="post2"></div>
In your case you need to add overflow: hidden; to the UIPostContainer class, since you can not scroll to an element without a height. And because you have a ~50px height fixed header that overlays everything you have to account for that as well, e.g. like that: $.scrollTo("#post2 h4", 800, {offset: {top:-55} });
Your code is 100% right it has no mistake
and as I saw your site is working too
Your code is right but the behavior you want is not there because the height for the divs of postcontainer like $('#post2) is not correct (it is 0px) in terms of styling.
The idea is to have images that appear on the page in a sliding way (sliding into place) and that part I managed to make.
What I don't seem to be able to achieve is to add some kind of easing to them - for example the image should go faster in the beginning and slow down right before reaching its destination.
I have the first part working on my website, but in the fiddle I created nothing works - anyway, this is it: http://jsfiddle.net/Sf5jC/ :
HTML:
<div id="click-me">
<div id="square"></div>
</div>
CSS:
#click-me {
width: 1000px;
height: 1000px;
}
#square {
position: relative;
left: 300px;
height: 100px;
width: 100px;
background-color: orange;
}
JS:
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 0
}, 500);
});
Could somebody please give me a suggestion? I'm quite a newbie in jQuery.
In fiddle nothing works because you did not select any library for it to work
Take a look at fiddle now Fiddle
And how about something like this to slow down
Fiddle
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 100
}, 500);
$('#square').animate({
left: 0
}, 1500);
});
As the commenter pointed out - you're missing jQuery from the fiddle which is why it doesn't work.
jQuery comes with 2 different easing options out of the box, swing (the default) and linear which as the name suggests is constant.
However, there's a really good library for different easing options that you can plug in - there's a link here and you can try out the different kinds on the page. Download it, include it in your website (after jQuery) and you can use the different easing methods.
To use easing in your code just add the type of easing after the duration. E.g.
$("#element").animate({"left":0},1000,"easingName");
Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/