Hide link when table is visible - javascript

I have a horizontal website that keeps displaying my tables/images (my images are in tables) when you click the 'more' link at the bottom. I am trying to make it so that when my last image/table is visible, the 'more' link disappears. I am very new at coding but I managed to compile this but it's not working.
I read that CSS always recognizes an element as visible as long as it fits within the page, and that Javascript must be used to check if it is actually visible on a page. Any solution is appreciated, thanks.
<script src="./lib/jquery.js" type="text/javascript">
function() {
if($('#finaltable').is(':visible')){
$('#morelink').remove(this);
}
}
</script>
<html>
//There are about 20 tables but the last one is ID'd as 'final table'
<table id="finaltable">
<tr><td>Final Table</td></tr>
</table>

You cannot use jquery :visible, because it's based only on the fact that your element has CSS display different that none (its parents as well) and its width and height greater than 0. references
In your case, I would use the offset property. On the click event on the "More" button to check where is the final table.
<a id="more" href="#">More></a>
<script>
jQuery(document).ready(function () {
$("#more").on("click",function(e)
{
//finaltable display on screen
if($("#finaltable").offset().left<=0)
{
$("#more").hide();
}
});
});
</script>

Refer to window.scrollY in a setTimeout to determine if your are nearing the bottom of the page: https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY

You are declaring a function in JavaScript but not calling it. You could write the following code.
/* Declare the function */
var f = function() {
if($('#finaltable').is(':visible')){
$('#morelink').remove();
}
}
/* Call the function */
jQuery(document).ready(function () {
f();
});
Here is a demo of the code.

Related

How to run a jQuery function only for child elements?

I'm trying to collapse all child comments including the parent comment when some clicks on the icon nested inside parent comment.
With below jQuery code I was able to get the comments box collapse but now the comments located inside another section are also getting collapsed.
jQuery code -
$('.comment-toggle pre').on('click', function(e) {
$(".single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment ").slideToggle('fast', function() {
if ($(this).is(':visible')) {
$(".comment-toggle pre").text('[–]');
} else {
$(".comment-toggle pre").text('[+]');
}
});
});
$('.comment-toggle pre').on('click', function(e) {
$('.single-comment-wrapper .left-side').slideToggle('fast');
});
Since HTMLand CSS was too long. I've created a codepen. Below is the direct link to it.
https://codepen.io/anon/pen/Vzrvbm
Thanks in advance.
The structure of your divs makes this tricky, I've been playing around on the fiddle for ~10mins and have come up with this - its heading in the right direction but not perfect...
$('.comment-toggle pre').on('click', function(e) {
$(this).parents('.single-comment-wrapper').next().slideToggle('fast', function() {
All the plus and minuses change because currently your code is targeting classes, it needs to change to be relative to the +/- clicked so $(this). etc
Update you jQuery to search elements relative to your clicked element:
$('.comment-toggle pre').on('click', function(e) {
// find main comment element
var rootComment = $(this).closest('.single-comment-wrapper');
// hide child comments of current comment
var children = rootComment.parent().find('>.child-comment');
children.slideToggle('fast');
// hide left part
rootComment.find('.left-side').slideToggle('fast');
// hide current comment
rootComment.find('.comment-text').toggle('fast', function() {
if ($(this).is(':visible')) {
rootComment.find(".comment-toggle pre", this).text('[–]');
} else {
rootComment.find(".comment-toggle pre", this).text('[+]');
}
});
});
Also, if you can change markup to include children elements in the context of the main comment element it would be much more easier to work with. Tree-like view based on ul would simplify markup and reduce amount of HTML elements.
I think, you should use different classes for divs. Because when you click .content-togle class, javascript code executes actions for all .single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment classes.

how to Hide a div when css is disabled?

i have a div which is hidden initially and will be visible later depending on some click events results.
I have wrote this
$(document).ready(function () {
$('#<%=disable.ClientID %>').hide();
});
<div id="disable" runat="server">The following question is disabled</div>
But when i disable CSS it appears, when i don't disable css it gets invisible. how do i make this invisible even when css is disabled and visible later again
There is no way to make something invisible without CSS. But you can remove it:
$(document).ready(function () {
$('#<%=disable.ClientID %>').remove();
});
You would then need to readd all the mark up again should you wish to show it again.
Edit
You could do something like this:
$(document).ready(function () {
var item = $('#<%=disable.ClientID %>');
$(document).data('myElement', item.clone());
item.remove();
});
then you could re-add it
$(document).append($(document).data('myElement'));
If you are willing to write server code for this, then you could do this in the code-behind.
// c#
if(some condition...)
{
disable.Visible = false;
}
This will remove the div from the HTML output of the page.
I do not get you when talking about enabling and disabling css, but you can always manage the DOM elements via DOM manipulation. As you tagged jQuery:
$(document).ready(function () {
/* please try top avoid mix server side variables and javascript code */
$('#myTargetDiv').hide();
$('#myToggleButton').on('click',function(){
/* select the elements you want to hide / show with the click on this element */
var $elements = $('#myTargetDiv');
$elements.toggle();
});
});

jquery: if other slidetoggle is enabled (visible), close before initiating new slidetoggle

I've got the following script. I've got 3 div's that are all display: hidden; that I want to drop down from the top of the page using slideToggle.
<script type="text/javascript">
$(document).ready(function(){
$("#irN").click(function () {
$('#irN_dd').slideToggle();
});
$("#myir").click(function () {
$('#myir_dd').slideToggle();
});
$("#myirmsg").click(function () {
$('#myirmsg_dd').slideToggle();
});
});
</script>
HTML:
<a id="irN">irN</a>
<a id="myir">myir</a>
<a id="myirmsg">myirmsg</a>
This script works great. The only issue is that all 3 can be opened at the same time. I only want 1 to be able to be open at any given time. So...how would I modify the script to do the following..
... if none are open and the viewer clicks one of the id's, it opens....
... if one of the divs are open and the viewer clicks another one of the id's, it slides the one open up and then slides the new one down.
Thanks in advance!
Edit in regard to comments
If you didn't want to check the markup etc, you could use something like the following to acheive what you wanted:
$("#irN, #myir, #myirmsg").click(function () {
var example = "#" + this.id + "_dd";
$(example).siblings("div[id$=_dd]").slideUp()
.is(":visible")
? $(example).delay(1000).slideToggle()
: $(example).slideToggle();
});
This fits all your functions into one concise event (could probably look nicer but I'm too tired to think of anything better right now).
jsFiddle example

mCustomScrollbar scrollbar display on hidden div

I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that:
('modalcs' is the name of the div that pops up)
And the function:
function update_scroll(theID)
{
document.getElementById(theID).style.display = 'block';
$(".scrollable").mCustomScrollbar("update");
}
In my $(document).ready(function() I have:
$(".scrollable").mCustomScrollbar({
theme:"dark-thick",
scrollButtons:{
enable:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
}
});
and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.
TIA for any help!
The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each
$(".scrollable").each(function(){
$(this).mCustomScrollbar("update");
});
On the other hand, since you are operating on 1 element, you can just change your function:
function update_scroll(theID)
{
$('#' + theID).show().mCustomScrollbar("update");
}

How to show / hide multiple elements at the same time with javascript

So, I have this between my head tags
<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
for (i = 0; i < hidden_links.length; i++) {
hidden_links[i].style.display = "visible";
}
</script>
And my divs are all similar to
<div name="javascript_needed" style="display: none;">stuff</div>
the overall goal here, is to have these divs hide when javascript is disabled, and re-enable them when javascript is enabled.... but for whatever reason, my code doesn't work. I ever tried it in the webkit console, and nothing errored =\
The JavaScript is executed before the divs are in the DOM. The standard way to do something after the DOM is ready is to use jQuery's $(document).ready(function () { });, but there are other ways as well.
The oldschool way is to use <body onload="myfunction()">.
Here's a newer way (edit: put display:none into CSS):
HTML:
<p class='javascript_needed'>hello</p>​
CSS:
.javascript_needed {display:none;}
JavaScript:
​$(document).ready(function () {
$('.javascript_needed').show();
});
​
Your JS should be setting the div's display to "block" ("visible" isn't a valid value for display).
Also, from the looks of things your elements aren't in the DOM at the time the code is fired (your code doesn't see them yet). Do any of the following:
Place your code anywhere in the document body below the divs
or, use an unobtrusive strategy to fire your function on window load, a la:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
or, Use a JS framework's "ready" functionality, a la jQuery's:
$(function () {
nameOfSomeFunctionToRunOnPageLoad();
});
"visible" is not a valid value for "display". You're after "inline" or "block".
"visible" and "hidden" are valid values for the "visibility" CSS property.
Difference between display and visible:
An element that is visible still takes up space on the page. The adjacent content is not rearranged when the element is toggled between visible and hidden.
An element that is display=none will not take up any space on the page. Other display values will cause the element to take up space. For example, display=block not only displays the element, but adds line breaks before and after it.
The disadvantage of showing elements on ready is that they will only flicker in after the page has finished loading. This usually looks odd.
Here's what I usually do. In a script in the <head> of the document (which runs before the body begins to render), do this:
document.documentElement.className = "JS";
Then, any CSS selectors that descend from .JS will only match if JavaScript is enabled. Let's say you give your links a class of javascriptNeeded (a class is more appropriate than a name here). Add this to your CSS:
.javascriptNeeded{
display: none;
}
.JS .javascriptNeeded{
display: inline;
}
…and the elements will be there from the start, but only if JavaScript is enabled.

Categories