hidden date form element cant delete? - javascript

I am using calendarDateInput.js to add dates to my form which is all working. The problem is when my page resizes to mobile and its a much smaller screen size.
At the moment the screen can move to the right due to a hidden element in the
td.calendarDateInput
When you click on the style it shows this grid Which I want to delete as Im not using it for this site.
The . Loads from the calendarDateInput.js file ( I have tried to delete it but that does not solve the problem)
Example below
https://jsfiddle.net/timcross/sj9aronc/4/
(But can’t get the css from the js to show for some reason on JSfiddle)

You could use CSS to set display: none on the elements. There may be a more elegant "catch all" way of doing this but you get the idea...
#eventenddate_ID_Link{
display: none;
}
#eventenddate_ID{
display: none;
}
#eventstartdate_ID_Link{
display: none;
}
#eventstartdate_ID{
display: none;
}
or
#eventenddate_ID_Link,
#eventenddate_ID,
#eventstartdate_ID_Link,
#eventstartdate_ID{
display: none;
}

Related

How to make a HTML list appear vertically instead of horizontally using CSS only?

I'm designing a product page on Wordpress, using the Elementor and Woocommerce plugins.
I got a product data tabs made of an unordered list items from Woocommerce that shows the Description, More info and Reviews horizontally, and I'd like to style it to appear vertically with the Description, More info and Reviews text in the right of the tabs/titles.
This is the page I'm working on: This is my product page.
And I'm trying to make the Product data tabs similar to those here: This is the model page I'm learning from.
I tried to add this code in Atom, the program I'm using to edit the CSS code of the website, but it didn't help much:
.woocommerce div.product.elementor ul.tabs {
display: inline-grid;
}
.tabs .wc-tabs {
display: inline-grid;
}
.woocommerce-Tabs-panel .woocommerce-Tabs-panel--description .panel .entry-content .wc-tab {
display: inline-grid;
}
.woocommerce .elementor-4060 .elementor-element.elementor-element-6b584e4 .woocommerce-tabs .woocommerce-Tabs-panel {
display: inline-grid;
}
Can I customize the unordered list to make it vertical like in the example I'm learning from with just CSS, and to have that black line under the title from the model page that grows bigger only on hover? Editing the HTML file is a bit harder since I'm working in Wordpress and I'm not customized to doing that but I could try, and I don't have any knowledge of Javascript yet (if it's required, though I can edit the Javascript file of the website).
If you inspect the code, you can see that this styling is causing elements to align like that. Try to change display to flex
Try this
ul{
display: flex;
flex-direction: column;
align-items: center;
}

Alternative to display-toggle when I am not certain that the element uses display:block when visible?

I am working in a project where theer are many js procedures like the following:
if (show)
$('.some-element').css('display', 'block');
else
$('.some-element').css('display', 'none');
How can I achieve the same thing when I don't want to require that .some-element uses display: block; when visible?
.some-element might for example have been designed to use display: inline-block; or display: flex;.
Limitations:
I don't want the element to take up any space when hidden. For this reason I think that the popular methods visibility: none; and opacity: 0; would not work.
I don't want to save any state in js, for example to remember the original display property value.
Do it like this
if (show)
$('.some-element').css('display', '');
else
$('.some-element').css('display', 'none');
This code ($('.some-element').css('display', '');) will remove the inline display: none property , when it is not needed.
jQuery's already solved this problem for you with toggle, show, and hide:
$('.some-element').toggle(show);
or
if (show) {
$('.some-element').show();
} else {
$('.some-element').hide();
}
What I generally do is use a class for the hidden state, because you do know that when the element is hidden the display property should be none.
.whatever {
// normal rules
}
.whatever.hidden {
display: none;
}
Then you manipulate the visibility of the element by adding or removing the "hidden" class. Since your rules don't affect the visible rules for the element, it can be display: inline; or display: table-cell; or anything else.
This approach can get complicated when there are in-line "style" attributes; that's a reason I don't generally like those in my code.
Another alternative to using display is to give the element an absolute position far off the visible page:
.whatever.hidden {
position: absolute;
left: -10000px;
}
This is useful for form fields that need to be invisible but which also need to actually work as form fields. Internet Explorer in particular does not like invisible (display: none) inputs, but it's OK with ones positioned off the screen.

How to vertically pile items in mobile/tablet view in html/css?

I am working on a fiddle which is working perfectly fine in a desktop view.
The desktop view works in a way that on click of any 2 product items (By default, one remain selected) , the description box gets displayed at the bottom giving detailed explanation of those product items.
The snippets of CSS codes which I have used for the mobile view:
#media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%; padding-right: 3.91%;
}
}
Problem Statement:
In the mobile view, there is one small issue. The issue is that, I am seeing the explanation of both product items whereas only one should be displayed without changing the look of it i.e. items should remain piled up.
I want the mobile view to work exactly in a way as in the desktop view i.e. when we click one product item, the description box should display at the bottom and when we click another product item another description box should display at the bottom.
The reason why I have used display:inline-block !important because I want the items to pile up vertically in mobile view in html/css. Removing that will make the images and text squished.
This happens because of you have set display: inline-block !important; for div.franchisehubtv and div.cloudbasedtextipad in #media only screen and (max-width: 767px) which override your display: none; css.
Solution No: 1
You can remove those classes from the media query, so your #media will be like this
#media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
flex-direction: column;
}
.tv img {
max-width: 100%;
height: auto;
}
}
Solution No: 2
You need to override those css by adding these lines
div.franchisehubtv[style="display: none;"] {
display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
display: none !important;
}
Updated fiddle here
Update: You can set your layout using flex for small devices
Didn't get you clearly, can you please specify is this mobile view the one you want to be the same display in desktop? if so then i recommend you to check how to use bootstrap grid system and you can use their CSS as a benchmark.
Looking at your current solution, the second div has a style rule that is invoked below 767px, which forces it to display as an inline-block. By adding the !important declaration, this then overrides any other property declaration.
If you remove this rule, you'll get a broken layout, but the div is hidden as required.
As to the layout, the content within each div will need some refined flexbox rules, which can use the same breakpoint to switch between column or row direction:
flex-direction: column (for mobile)
flex-direction: row (for non-mobile)
One problem you have is because you set the display property as inline style in the HTML, so you have to use important to overwrite.
The second problem is that you are not having in count the display: inline-block on your jQuery.
You are going to have to change several things, I've changed the fiddle to account for these things, only works if you click in the buttons, on load you see both items, there are several ways you can do these things, I only want to make the minimal changes to show the result.
https://jsfiddle.net/zaefnson/2/
And on desktop probably doesn't work either, just like I said, there are several things you are going to have to change.

How to toggle visibility of flexbox styled popup with jQuery?

So I'd like to have a popup on my page. I would like to style it with flexbox. I'm using scss to style things and I have mixins for flexbox properties.
The issue I came across is that I want to have flexbox properties applied to my popup such as display: flex which has it's browser variants:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
When I try to change css to display: none my browser overrides it with display: -webkit-flex; so I'm still not hiding my element. I thought about using visibility but since jquery uses .show and .hide with display and not visibility it kind of seemed like a wrong tool.
Should I somehow override the jQuery .hide() to change the other display properties as well or maybe create the element each time I want to display it and then delete the html of it after submit?
I have my scss with this overlay-content styling:
.overlay-content {
/* this may or may not be here */
/* visibility: hidden; */
#include flex();
#include flex-direction(column);
#include flex-justify-content(flex-start);
}
And I'd have a code which triggers when I want to display my popup:
$('.overlay-content').css('visibility: visible;');
$('.overlay-bg').css('visibility: visible;');
Is it okay to use the visibility css property or should I always use the display property to change the visibility of the element?
What bothers me is that this way I can't use the cool jquery.hide() options for cool user experience
I've run into the same issue and solution I came up with may not be the most elegant but it does the job.
I simply called .hide() in the initialization code of the component. jQuery adds inline display: none to the element, and subsequent call to .toggle() removes it, so specified in the stylesheet display: flex comes into play.

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work
Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.
The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

Categories

Resources