jQuery show/hide toggles firing only at large screen sizes - javascript

The URL is http://zacimoveis.vistatemporario.com.br/nossa-equipe
The issue is with the blue description box that shows up when hovering the images. It works just fine for screen sizes larger than 980px, but nothing happens on < 980px screens, be it on tablets/mobiles or in desktops.
I've tried toggle(), slideToggle() and straight up show() and hide() and searched around for tons of different variations.
Here's the current version of the script:
$(document).ready(function() { $(".membro").hover(function() {
var pessoa = $(this).attr('id');
$('#txt' + pessoa).toggle()
})});
(No error message shows up in the console.)

Think the event is the problem here, you are using .hover. Don't think that will work on your tables/phones etc. AS a matter of fact there is no .hover on tablets/mobiles as i remember.
You might need to do something along the lines of
$(".membro").on("hover touchstart",function(evt){
// whatever
})
OR you might need to add a bit more CSS classes. There seem to be a grid system following the bootstrap approach which might be interfering with your positioning as well.

Related

Greyed scrollbar toggles on mouse event

A greyed out scrollbar appears on my webpage whenever there is a mouse event. There are several buttons on the page and clicking them, or mouse-over/out toggles the scrollbar to appear or disappear. I don't know why. When dragging a draggable area, it toggles back and forth very fast on mouse-move. I don't see any css changes when I use the inspect element tools on Chrome.
Has anyone had this problem before or know why this may be happening?
edit:
scrollbar:
If you know that the content will never exceed the size of the container, then you can use css to get rid of the scrollbar entirely
#yourContainerID {
overflow-y: hidden;
}
If you still want there to be a scrollbar when necessary, you could programatically insert one.
var yourContainer = document.getElementById('yourContainerID');
if (yourContainer.offsetHeight < yourContainer.scrollHeight) {
$('#yourContainerID').css('overflow-y', 'scroll');
} else {
$('#yourContainerID').css('overflow-y', 'hidden');
}
Solution was changing 15vw padding to %. I'm still not sure why it fixed it though.
Edit:
Same issue again. I solved it a different way. I think it is to do with the body height not actually taking up the height of its contents, due to the contents perhaps being positioned relatively. I will set up a bare-bones example eventually so I can give a definitive answer to anyone else who experiences this issue.

jQuery Add & Remove Class Div Width

How can i add/remove class according as div width ? I tried some codes but I have no idea about jquery codes. I'd like add div class according as antoher div width. Just i need add class like that. If container is smaller than 600px "add class" to content div else "remove class" from content div. These are my codes;
<div class="container">
<div class="content"></div>
</div>
$(window).resizeboxes(function() {
if ($(".container").width < 600){
$( ".content" ).addClass( ".content_600" );
}
});
else{
removeClass('.content_600')
}
$(window).trigger('resizeboxes');
This works, though the code is changed slightly. There were some problems with the syntax also, so I've corrected those (for instance the else statement was slightly misplaced). Here is a working example:
https://jsfiddle.net/vt0nbx36/3/
Here is the code:
var resizeboxes = function() {
if ($(".container").width() < 600)
{
$(".content").addClass("content_600");
}
else
{
$(".content").removeClass("content_600")
}
};
resizeboxes();
$(window).resize(function(){
resizeboxes();
});
For this need exactly, you have jQuery's .toggleClass() function. It takes the class name as a first parameter, and optional second boolean parameter that states wether the class name should be added or removed. You can find the documentation here
$(".content").toggleClass("content_600", ($(".container").width() < 600));
Even tho your question is a JS related question, CSS as a matter of fact can handle this like no other beast can (mostly)!
CSS allows you to use media-queries to resize your content based on the width of the viewport.
The upside of this is that the browser will handle this for you within the rendering engine rather than having JS between your change and the rendering engine.
The major downside is that you can't define the width of element A based on element B but are unfortunately locked to using the viewport as an indicator.
Before I explain why you'd want to use CSS I'd like to point out why you don't want to use JS for this if possible.
The jQuery.resize eventhandler fires inconsistently across browsers and it fires alot of times usually.
This causes your scrolling to clog up and make your webpage feel laggy.
If there's anything your users will dislike it's the fact that scrolling is controlled by something they don't even know of which is slowing you down.
As for a CSS solution, a media query looks like this:
.my-selector {
width: 900px;
}
#media all and (max-width: 600px) {
.my-selector {
width: 600px;
...
}
}
You wrap your code in a sort-of conditional that allows you to be very flexible with manipulating elements on the page.
What happens in the above piece of code is that when the parser reads the CSS it sees the first selector not in a media query so it applies width: 900px; then it sees a media query and sees the other rule for my-selector however it will only apply that rule when the screen is at that width we defined in the #media ... rule. When you resize CSS handles things differently behind the scenes so it's much faster than JS in that case.
I'm not sure if it actually applies to your situation but if your container is sized by the viewport rather than parent elements this should be possible and I thought it'd be nice atleast to show you a good way of playing with element dimensions.
Also, you can use #media to for instance make a webpage print friendly by changing the all to print for example and setting the background-color: transparent for an element - saves ink ^.^ which is an additional extra on top of the general awesomeness of media queries.
Hope it helps, good luck if you wish to make your webpage 5 times faster ;)

Weird flicker in jQuery toggle

I have a weird problem and i cant find a solution no matter what i tried.
I have a simple menu that toggles few divs (slide up/down), like this:
<div class="navigation">
<ul class="left">
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</div>
and a few divs that are being toggled.Pretty simple but there is a lot of code, so i wont paste it here.
Script that makes it work is:
$('.navigation a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.top-drawer').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
Once the user clicks on the link, the div slides down more than it should, flickers and then it becomes the real height (the height is should be).
Here is a Fiddle. Please be sure to have the "Result" Window at at least 1000+ px wide otherwise it wont work (the error wont be shown).
See my suggestion on this JSFIDDLE
Here an explanation of the changes in there:
The Problem
With all those floating elements inside each .top-drawer jQuery has a lot of issues calculating the height of the div because the elements will move around while sliding up and down.
Suggestion
Switching to inline-block instead. But for that to work with your CSS, particularly with the padding on each .top-drawer, you need to use box-sizing: border-box; on anything that is using padding, inline-block and width with %. If curious you can read about this HERE.
New problem
If you go the route of inline-block (best practice now). You will need to use jQuery 1.8.xx or higher. I noticed in your fiddle you use 1.7.2, which has a bug with border-box that was fixed in versions after that.
Try to understand the code you are using.
This is the way I think jQuery's slideUp(), and slideDown() works; mainly the algorithm changes the height of the element, and display after the height is equal to the height of the element or at "0".
So when you will have your element's position set to relative you will see what you're calling "flickers", specially when you have multiple element at the same position. You will also see these "flickers" when you use fadeIn(), fadeOut() etc, because the display of the element is not instantly set to "none" or anything visible in these cases, but after the animation completes.
Solution:
Set the element's position to absolute. That should solve your issue;
example.

strange CSS / Javascript behavior when hovering over TEXTAREA or A objects

I have a strange problem in my web-app (php) that I noticed recently.
1 month ago it worked just fine.
When I hover above a certain < TEXTAREA > or over 2 buttons (add, exit),
in a DIV, the DIV gets filled with its background color, making the INPUT, TEXTAREA and 2 buttons invisible.
This DIV is practically a window with 2 inputs and an OK and exit button,
that I hide and show, as a "window" thing would be in Windows.
The moment I hover any other button in the page (so I do a mouseOver), the DIV
shows up again, and it starts working the proper way.
So the problem is when i hover on the TEXTAREA and the 2 buttons, the DIV gets gray.
thanks!
i hope it's not a Chrome bug, in Firefox it seems to work,
but again in Opera it doesn't. So strange.
took at look at your site in Chrome and was able to replicate your problem easily.
by using the "Element Inspector" i removed overflow:hidden from .my_links_header_container and could no longer replicate the problem.
i tested it several times by reloading the page.
on page load, the problem existed, but immediately. after i removed the overflow:hidden, it 100% did not occur again.
on a side note, you have an inline style="display:block" on your .add_link_table, which is not really a table element but a div. that's redundant because a div is a block element by nature -- perhaps it was a table element previously?
i also noticed several elements whose natural display was overridden by your CSS. i think part of this problem is related to flip-flopping your elements and displays.
Seems to be a webkit issue.
This may not be a good solution, but give it a try
I am modifying you addLink method (use plain javascript or jquery selectors as you like, Ive kept the original code as it is)
function addLink()
{
var addLinkTable = $("#add_link_table");
if(document.getElementById('add_link_table').style.display=='block')
{
document.getElementById('add_link_table').style.display = 'none';
}else{
addLinkTable.css("visibility","hidden");
document.getElementById('add_link_table').style.display ='block';
setTimeout(showTable,10);
function showTable(){
addLinkTable.css("visibility","visible");
}
}
document.getElementById('link_name').focus();
}
Try it out with by switching visibility or opacity or height

Click function making page scroll in odd way (not to top of page)

First time asker, long time lurker.
I'm doing a fadein/out toggle that displays 1 of 2 charts depending on which button you click.
That bit works just fine, but I'm getting a weird page-jump glitch. Now, it's not the usual jump-to-the-top behaviour. I have that part covered in the code, and it doesn't do that.
Every time I click on one of the toggles, the page scrolls downward to the point where the chart area is at the bottom of the window.
But it gets weirder. If I make the browser window very short or very narrow (it's a responsive site), it stops doing this glitch. It's also not happening on iPhone or iPad at all, even though if I set the browser width to the same width as it would be on an iPad, the desktop browser still does the jumping.
There are no elements that are added/removed based on the viewport width in the area that's jumping around, and there are no anchor IDs that would be accidentally used as jump points.
Unfortunately I can't show the actual page to you, but I can show the script and a bit of the HTML.
The code for both toggles is the same, just with the IDs switched around.
The script:
$('#left-toggle > a').click(function(c)
{
c.preventDefault();
c.stopPropagation();
$('#right-toggle').removeClass('toggle-active');
$('#left-toggle').addClass('toggle-active');
$(pricing_subscriptionID).fadeOut('fast', function(){
$(pricing_singleID).fadeIn('fast', function(){
});
});
});
The HTML for the toggles:
<div id="chart-toggle">
<div id="left-toggle" class="toggle-active">Single Pricing</div>
<div id="right-toggle">Subscription Pricing</div>
</div>
"toggle-active" is just for styling.
Any ideas?
It seems to be almost wanting to centre the toggles on the page, but it's not quite putting them in the middle either.
JSFiddle: http://jsfiddle.net/TmrLw/
It's because of your link to #. Here are some ways you can fix this:
1. Replace "#" with something else
Instead of
Subscription Pricing
Try this:
Subscription Pricing
This will give you the cursor pointer you're looking for and avoid the page jump.
2. Create a class with the pointer effect
If you use this CSS rule:
.pointer {
cursor: pointer;
}
Then you can wrap your text with this class instead:
<div class="pointer">Subscription Pricing</div>
3. Remove the default effect of "#"
This Javascript will get rid of its default effect:
$('a[href="#"]').click(function(e)
{
// Cancel the default action
e.preventDefault();
});
Hope this helps
Probably its because the link's href is # which links to the top of the document.
try to remove the href attribute

Categories