I am using reactJS and I would like to hide a div on smaller screen (width<768px). I have two options here:
First Method:
{
!!isSmallerScreen ?
<div className="icon">Icon</div>
: <div className="name">Name</div>
}
Description: isSmallScreen is a boolean variable. This way will not even show other div in source code.
Second Method:
<div className="icon hidden-md-up">Icon</div>
<div className="name hidden-sm-down">Name</div>
Description: I'm using twiitter bootstrap here which will add display: none on other div.
P.s. I know bootstrap is also using javascript but my question is which approach is better to use? Infact I am confused whether to use bootstrap or not as I'm already using css3 flexbox system with postcss and cssnext.
Your suggestions will be highly appreciated. Thanks for your time in advance.
In the second method, though will hide the div but still remain in the DOM.
You should use ReactJS method and not render the div is possible.
The reason being if you don't need a dont unnecessarily create it and make the DOM heavy.
Hope this helps.
Matter of preference (and minimal perfomance issue probably not worth stalling the decision making).
Personally I would go with the second method for the simple reasons that:
Easier to add transitions (fade in/out)
A little cleaner
Your vdom will stay the same - if a 3rd party, or yourself,
later decide to manipulate the dom outside react, you know
it will be consistent. (ie, selecting nth-child, etc). no surprises.
But, ultimately up to you :)
As dattebayo pointed out, it is bad practice to add unnecessary elements to the DOM. When making a decision in how something should be hidden, ask yourself a couple questions;
Will this element alternate state? Not this.state but whether or not it is hidden.
If not, then conditional rendering is the clear choice.
render() {
return (
this.props.isSmallScreen ?
<SmallScreenElement /> :
<BigScreenElement />;
);
}
If yes, will it alternate state frequently?
If yes, CSS is likely the choice for this particular element.
Otherwise stick with conditional rendering.
I hope this helps!
Related
I was wondering about hiding elements with DOM, the person in the course is doing this by setting the display to none
document.getElementById("id-name-1").style.display = "none";
document.getElementById("id-name-2").style.display="none";
We are hiding two elements here, now both elements have the same class. I have been converting what the course is showing me into jQuery as well for added challenge. The jQuery code that I used is as follows, the name of the class they both has is say dice.
$(".dice").hide();
This hides both elements at the same time, which way would be better? I know that if I had other elements with class dice it would also hide them. So maybe that is why the other way is better? Thank you for your thoughts -- I am new to this.
Stephen
If you use vanilla javascript, can do something like
document.getElementsByClassName('className').forEach(el => el.style.display = "none")
I recommend you use vanilla javascript instead of JQuery because is most probably that you will use javascript than jquery in a new project. and on the other hand, will be more easy for you use libraries like react if you have a good vanilla javascript foundation.
Your question is open ended. No right or wrong answer.
$(".dice").hide();
As mentioned, this will hide all elements with Class "dice". If you want to be more specific, you can be:
$("#id-name-1", "#id-name-2").hide();
This selector uses IDs and selects both elements.
Your selector can be more vague or more precise as needed.
See More: https://api.jquery.com/category/selectors/basic-css-selectors/
Document.querySelectorAll(".dice") would also be able to the above based on the style using purely javascript. So it all comes down to preference since it works the same way with display:none;.
Also,.hide() takes in optional arguments/callback functions which can help with hiding the element(s).
I have to render a lot of divs into DOM. So, what I did is I render the first 5 elements into the DOM first after that I render every 10 divs with 300ms interval period.
The problem is when I change into display: block I need to change something in the component. So, I try to use didRender hook for that.
Code is below
didRender() {
if(this.element.offsetParent) {
this.set('myvar', true);
}
}
But it's not working perfectly. Anyone please suggest me which is the best way to do this.
_Thanks in Advance.
It's hard to guess your use case from the question but I assume that it's about rendering a very large list of items without causing performance issues. The ember ecosystem provides bulletproofen addons to do so. The most established ones I'm aware of are ember-collection and ember-large-list. I would recommend to use one of these if they suit your requirements. Reimplementing something similar will be a lot of work. Rendering new items on a timeout basis would not scale well as it doesn't take workload of browser into account.
For your concrete question: Ember does not provide a way to listen to CSS changes. You should execute custom logic at the same place as in which you are mutating the property which triggers the CSS change. If it has to be run after render, you need to deal with Ember's runloop.
The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.
I am building custom buttons(sliding doors) for a new website. The buttons will not trigger a link but a javascript that then submits the form.
My solution is to use div (instead of link) with span within.
The question is if I should use onmouseover/onmouseout or is hover a preferred?
Pleas note : My website demands javascript else it wont work at all, so there is no problem to use javascript for the button, the question is which way that is the most correct?
I would do it with CSS because it would require less code and it would work with Javascript disabled
If you are talking about jQuery events, it doesn't matter, it's the same.
If you're talking about HTML onmouseover/onmouseout vs. CSS:hover, go for CSS:hover.
It's far easier to maintain, looks cleaner and decreases the size of your HTML which is a mess most times, anyways.
The solution for this is to simple use onmouseover/onmouseout on the div element. It will generate some code but it will be safe to use even in IE6.
This will ofcource demand javascript but that will have to do.
I'm building a one-page(one file) site and want to get insight as to whether or not I'm taking the most practical and intelligent approach. The site is a simple site for a graphic designer. It has 4 "pages" which are "about me", "contact", "work", and "photos." What I want to do is have 4 divs(absolutely placed in the same spot) with only one visible at a time. When you click any of the links it turns the visibility of the others off and the clicked link on. There are a few ways I could do this though:
Should I use Visibility to show/hide the layers?
Should I use Z-Index to show/hide the layers?
Is jQuery the best way to handle this?
Is using classes such as .visible .hidden the best way to cycle which divs are shown/hidden?
Any other tips to doing this for maximum efficiency?
I know some will tell me to just use separate pages but the site is simple with thumbnails and most of the size is in the header and jQuery script honestly. The thumbnails are fairly small and I don't see a point to making the site with more than one page if I don't have to.
Thanks for any insight.
As Pekka indicated, there may be arguments against doing this as a single-file site. But I'll assume you have a compelling use case. Answering the question:
I would approach this like so:
Use four divs.
No need to absolutely position them, just put them one after another.
Give each div a distinct ID with a semantic name (e.g., "about", "contact", etc.).
Don't hide any of them initially, just let them show one after another. Now the page can be used by people without Javascript, and it works just fine for search engines.
On page load, use Javascript to hide all but the one you want to show.
Determine which one you want to show by looking at the anchor in the location, e.g., "#about" means you want to show the about div, "#contact" means you want to show the contact page.
When you are changing from one to another, change the anchor to match. Now the site is bookmarkable/linkable.
Consider using a history plug-in to manage the anchors, so you can get forward and back support without absolutely tearing your hair out with all the browser inconsistencies. :-)
Not an answer to your questions, but there are compelling reasons speaking against this kind of approach.
Most importantly, it won't work with JavaScript turned off. It will be completely unusable for somebody who has no JavaScript. This makes it an absolute no-no for me.
It makes it impossible to link to specific pages
It's a SEO nightmare - maybe not that important in a 4-page site but still worth mentioning
Maintenance becomes more difficult, as there are four or more complex page structures melted into one
If you are using jQuery, just call .show() and .hide() as needed to toggle the sections.
However as noted by #Pekka, it is likely better to leave these as separate pages.
I think that using Jquery would be the best way to achieve this effect. Pekka mentioned that it won't work for users who have javascript turned off, but really-how many people have javascript disabled these days? Pretty much every single website you will visit relies on javascript.
In my opinion, the best way to get tabs using jquery is to use a plugin developed by Nettuts editor, Jeffrey Way. His personal site on which the plugin is located is under construction right now but I downloaded it a while ago. Here's a link to a zip file with the necessary files inside.
Please note that I have simplified his version greatly. This means I have removed a lot of styling but this shouldn't be a problem, since you probably will want your own unique styles.
JW-Tabs
Hope this helps.