I have a requirement and am not sure how to achieve it. I have a div with display:none and I fetch the element to show in console with document.getElementByName API. Is there a possibility that I can stop this from happening?
The expectation is if it has a display: none, null should be the query result when I access it or its children
function fetchChildToNone(){
var _ele = document.getElementsByName('test_fetch');
console.log(_ele);
}
#div2{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title> Test fetching child to a parent with display:none</title>
</head>
<body onload="fetchChildToNone()">
<div id="div1">
<span> A div to not make the page empty</span>
</div>
<div id="div2">
<span id="test_fetch" name="test_fetch"> Hello World</span>
</div>
</body>
</html>
There is actually no way to know if an element is visible or not, if you are only testing this element.
The only available way is to test offsetWidth offsetHeight if there both equals to 0 that mean two things element is on display:none or element is empty but you don't really know if you fill this element after it will keep their offset equals to 0. Moreover if your element is on visibility:hidden element's offset will not be equals to 0. So this solution is not the best.
The only way to do this nicely (without framework) is to test display and visibility of this element and all his parents.
function fetchChildToNone(){
var _ele = document.getElementsByName('test_fetch');
console.log(isVisible(_ele[0]));
}
function isVisible(elem) {
var style = window.getComputedStyle(elem, null);
if(style.display === 'none' || style.visibility === 'hidden') return false;
if(elem.parentNode && elem.parentNode.tagName !== 'body') return isVisible(elem.parentNode);
return true;
}
#div2{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title> Test fetching child to a parent with display:none</title>
</head>
<body onload="fetchChildToNone()">
<div id="div1">
<span> A div to not make the page empty</span>
</div>
<div id="div2">
<span id="test_fetch" name="test_fetch"> Hello World</span>
</div>
</body>
</html>
If you can use jQuery, then the solution is this:
$('test_fetch:visible')
Otherwise, you have to resort to this:
if(_ele.offsetWidth > 0 || _ele.offsetHeight > 0)
{
//element is visible, put your logic here.
}
Source of the solution above is here.
display: none will not prevent the browser from loading that markup and associated resources but it will prevent the browser from applying css to the the hidden div or the elements inside it. Until its display value changes, it is not rendered as part of the page flow . Basically, display: none and visibility: hidden have no impact on page load time. You need to selectively choose when to display it since that triggers a rerender of page content, and even that is usually a negligible difference in all.
I would suggest that if you want to wait to load the content until it's needed, don't include it at all or include empty divs as placeholders and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. Try to use jQuery if you can as it has inbuild AJAX init.
From jQuery you can do something like this :-
$(element).is(":visible")
Bingo !! :)
Related
So, I am trying to load picture from another page using Jquery .load(), now the element I am trying to load has multiple children element which also load on current page, now obviously I could hide those divs but first I want to know if there's way to only grab parent div and leave out children.
I have tried using parent() method but since .load() works differently, it didn't work as intended. (Unless I missed something)
$('#myNewDiv').load('/robots .heading-image');
Here's HTML code from the other page
<div class="heading-image" style="background-image:url(imagelinkhere.png)">
<div class="heading-image_cover">
<div class="left">
<div class="heading-image title">Heading Title</div>
<div class="heading-image desc">I am a desc</div>
</div>
<div class="right">
<div class="heading-image stat">Stat text</div>
</div>
</div>
</div>
That's the code I am using right now, but .heading-image has multiple child elements as mentioned above.
To sum up, I need to load only parent element and ignore all child elements of the div mentioned above without having to load those children on current page and hide them (If possible)
From what I understand, your goal seems to be to copy the empty div to a new page, while maintaining the background image associated with the <div> tag.
The simplest approach would be to add to a stylesheet in which both of the pages can reach. For example:
CSS
.heading-image{
background-image:url(imagelinkhere.png);
}
JavaScript
$('#myNewDiv').html("<div class="heading-image"></div>");
Then in the head of both HTML documents, have <link rel="stylesheet" href="style.css"> to point towards the correct stylesheet for both pages.
If you just want the empty <div class="heading-image"></div> you could use the load() complete callback to empty it:
$('#myNewDiv').load('/robots .heading-image', function(){
// new html exists in page now, 'this' is #myNewDiv element
$(this).find('.heading-image').empty();
});
If there are resources inside that element like images, videos etc that you don't want to load in page you could also parse the :
$.get('/robots').then(function(html){
var $hImage = $(html).find('.heading-image').empty();
$('#myNewDiv').html($hImage)
});
With all that said I don't see why you need to extract an empty element from another page and can't just do:
$('#myNewDiv').html('<div class="heading-image"></div>')
I find myself needing to change style of all elements that have an attribute in common (let's say a class name) when one of these elements is hovered. This is super easy to do with jQuery, like this:
$(function() {
$('.bookId4').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
Though I don't know how to achieve this with Angular. In this example, the elements that have the class .bookId4 are generated with Angular AJAX call, so I'd like to use Angular to create the hover effect as well. Thank you!
EDIT
To explain further, I will have many divs being generated with an AJAX call, and the div's that are in the same group will have the same class. This is the HTML code:
<div class="bookId{{ privateTour.booking.id }}"> <!-- Wrapper for hover effect -->
When one of the divs is hovered I want ALL of the divs (not only the div that is being hovered) with the same class (or some other value that they may have in common) to have a hover effect. My preferred way would be for Angular to search the whole page for all divs with a certain class name and apply a style to that class (to not have to for example generate tons of CSS for all the classes that were generated, which I'm not even sure it would work).
You can do that by using ng-mouseenter and ng-mouseleave directives, Here is the simple code, you can build on top of it to meet your requirements
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example73-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="">
<h1 ng-style="myStyle" ng-mouseenter="myStyle={'background-color':'blue'}"" ng-mouseleave="myStyle={'background-color':'none'}"">Hello World</h1>
</body>
</html>
You can apply simple css solution for hover, like
.bookId4:hover {
background-color: '#F00';
}
No need for angular or jQuery :-)
Yes I agree with using ng-mouseenter and ng-mouseleave.
I did a example hope can help you
https://embed.plnkr.co/Cxfv0I9IEfBhZYj8A3zS/
use ng-class, create one scope variable which is by default false.
when mouseEnter OR mouseLeave event occurs make it TRUE/False accordingly.
<style>
.bookId4{color: red;}
</style>
<span ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 1</span>
<span ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 2</span>
<span ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 3</span>
_this.ishovered =false;
_this.hovered = function(){
_this.ishovered =true;
}
_this.nothovered = function(){
_this.ishovered =false;
}
In the end I found using an ng-class condition to be the best solution, and a variable decides what group should be highlighted. This line that I initially tried using did not work correctly:
<div ng-class="hovering == privateTour.booking.id ? 'hl' : ''" ng-mouseenter="hovering = privateTour.booking.id" ng-mouseleave="hovering = 0"> <!-- Wrapper for hover effect -->
For some reason, only the hovered div was highlighted, so I had to send the signal to a variable using a function instead for it to have a global effect. I ended up using this code for the div wrappers:
<div ng-class="hovering == privateTour.booking.id ? 'hl' : ''" ng-mouseenter="setHover(privateTour.booking.id)" ng-mouseleave="setHover(0)"> <!-- Wrapper for hover effect -->
And I wrote this simple function in the scope:
$scope.setHover = function(bookId) {
$scope.hovering = bookId;
};
And here's the style for the highlight class .hl:
.hl {
background-color: red;
}
Thank you for everyone giving the lead of ng-mouseenter and ng-mouseleave!
I have the below html. I am trying to access the div tag warningMessage under scripts.
<script id="notePopup" type="text/x-kendo-template">
<p class="notePopupMessage">Please enter a note:</p>
<input class="textNote k-textbox" type="text" maxlength="512" />
<div class="buttons">
<button class="add k-button">Add</button>
<button class="cancel k-button">Cancel</button>
</div>
<div id = "warningMessage" style="visibility: hidden" >
<p id="warningMsg" > Status change action note would not be saved until Save button is selected. </p>
<div>
</script>
I tried to access div id warningMessage and set the visibility to not hidden on certain events by doing something like this$("#warningMessage").show(); and it did not work.
What do we have to do different in order to access this div tag. I suspect its behaving like this because it is under a script tag.
Here is the Fiddle link.
Try running the kendo script first, then access the element by running the jQuery function you mentioned? I guess when the kendo script is finished, that template will be converted to valid html, and your div will be accesible for jQuery.
It won't work because you first set a visibility:hidden.
So either you set it to visible when the event occurs, or you first display:none this div and make it display:block (using show(), fadeIn() and so on) for this specific event:
Here is a fiddle for you: https://jsfiddle.net/liototo/jnmyswy4/1/
I set the warning div to:
#warningMessage{
display: none;
}
The jQuery part is then as follow (just an example):
$('.add').on('click' , function(){
if ($('.textNote').val())
$('#warningMessage').show();
else
alert('enter something!');
});
I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.
I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.
Here's the code I have, which successfully does not show the div on permalink pages:
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
This will work:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
This is displayed only on the index page.
</div>
{/block:IndexPage}
More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization
I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.
<div id="splashbox" style="display:none">
This is the content I wanted to show on the post pages only.
</div>
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (self.location.href.indexOf("post") > -1 ) {
document.getElementById('splashbox').style.display='block';
}
}
</script>
You can also do it just with CSS.
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
display:none will hide it but thats, a hidden element can still mess with your layout.
We could use the comment code* to turn the div into a comment that wont mess with anything.
*<!-- comment -->
ex.
{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}
<div style="width:400px; heigth:200px">
blah blah
</div>
{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
<div id="splashbox" class="mid2" style="display:none">
Followed by this script:
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
//alert('location match, show the block');
document.getElementById('splashbox').style.display='block';
}
}
</script>
This is solved by using div:not() operator.
The HTML Markup will be
{block:IndexPage}
<div id="banner">
<div class="banner_{CurrentPage}">
This Content will appear in only on home page
</div>
</div>
{/block:IndexPage}
Now add this CSS to
#banner div:not(.banner_1)
{
display:none;
}
{block:SearchPage}
#banner
{
display:none;
}
{/block:SearchPage}
{block:TagPage}
#banner
{
display:none;
}
{/block:TagPage}
The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.
Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
Alternatively, you can use this tag: {block:HomePage}.
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
References:
https://www.tumblr.com/docs/fr/custom_themes
I have a stack of <div> elements that show a name. I'd like to include a + link off to the side of each <div> that, when clicked, expands the <div> and adds more detailed information (from a RoR controller).
After poking around on the net, I found link_to_remote and related RoR stuff, but I can't seem to get the right combination to work together. Can someone point me to a tutorial or show what the controller and view interaction should look like?
Thanks!
You can do this really easily with Javascript in the example below:
<html>
<head>
<title>Text Page</title>
<script language="Javascript">
function toggleDiv(divid) {
if (document.getElementById(divid).style.visibility == 'hidden') {
document.getElementById(divid).style.visibility = 'visible';
}
else {
document.getElementById(divid).style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<span onClick="toggleDiv('div1');" style="cursor:pointer;">+</span>
<div id="div1" style="visibility:hidden;">This is DIV 1</div>
<span onClick="toggleDiv('div2');" style="cursor:pointer;">+</span>
<div id="div2" style="visibility:hidden;">This is DIV 2</div>
</body>
</html>
If you set the initial visibility of the DIV's to hidden, you can use the toggleDiv function shown above to toggle the visibility of any DIV given the ID. You will probably need to tweak the style definitions for the DIVs to display next to the plus signs (put them in adjacent <TD>'s in a table for example), but I figured I'd keep it simple.
Good Luck.