I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.
I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>
You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.
Related
I am using a carousel widget of the hugo framework but this is might be a very basic html question. I want a hyperlink in the text to do two things: change the item of the carousel widget and to focus on it.
My current code looks like the following:
linked phrase
This now successfully changes the item of the carousel to the desired one. But it does not focus to the carousel.
On the other hand I can focus on the carousel like this but of course the item of the carousel is not changed:
linked phrase
So how can I combine both? I tried also to include the data-target and data-slide attributes into a li-tag that surrounds the a-tag, which indeed triggers the change of item but which also ignores the href.
I also tried a span-tag within the a-tag without success either.
Maybe I need to do something with javascript? I tried but don't know javascript very well.
Thank you in advance!
OK, after all I solved the issue like the following. I created a javascript that scrolls to the carousel. I actually also built a button to connect that javascript. And within a table, I created cells that contain the attributes data-slide-to.
<th data-target="#hero_carousel" data-slide-to="4">
<button type="button" style="width:100%" onclick="document.getElementById('screen_focus').scrollIntoView({
behavior: 'smooth'});">Daten sammeln</button></th>
I tried to put together a CODEPEN HERE for you, but I'm afraid it will not be much help since I can't reproduce the problem there.
This is a very complex and large website. It is very difficult to provide you with just the code that applies to this, since there is so many scripts and stylesheets that are working together to make it work, but I am doing my best to provide you with what I can.
Basically, when the page loads, it loads fine, but when I click on a link in the menu to take me to that page, that page loads with a "broken" menu look. SEE PIC. As soon as I refresh the page or even resize it by one pixel, it resets to the way it should look. SEE PIC ALSO
Please, someone, have you come across something like this? enter code here And if you can't find a mistake by looking at the code, is there a way to refresh any given stylesheet or script? I can't force a page refresh because some things are supposed to process from the database on PageLoad.
I'm not holding my breath, but I certainly hope you guys can help.
Here is the pic with the problem. and the link to codepen is above
Try to add something like ?v=1232 to your style
href="css/init.css?v=1232"
The problem has been resolved. Apparently, the accessibilitymegamenu.js adds the attribute aria-haspopup="true" programmatically which it makes it bug out if you add it manually when coding for JAWS and/or any other non-sighted users accessibility website.
If you're using any accessibility script and your hyperlink is coded as follows:
<a id="myID" href="#" class="myClass" aria-haspopup="true">My Link</a>
change it to:
<a id="myID" href="#" class="myClass">My Link</a>
Your output (according to the accessibility script) will still be:
<a id="MyID" aria-label="My Label" href="javascript:void(0)" aria-haspopup="true" aria-controls="accessible-megamenu-1426257105716-6" aria-expanded="true" class="MyClass">My Link</a>
Hopefully this helps others and saves them the two weeks of debugging it cost us.
Happy Coding!
I've searched around the web for a solution to my problem and im getting pretty close to my desired design with Accordion JQuery but..
I have some extension to the JQuery template which I dont know how to implement, so here it goes:
This is how my Div looks when you enter the webpage:
When you hover over either the picture or the title/text the text will be underlined and italic so that the user know the feature with cliking on it.
What I would like see if the visitor clicks the picture/text is this:
This is my HTML for that specific Div
<a href="#">
<div class="newsbox">
<img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
<br />
<p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
<div class="vertical_accordion_toggle">
<p></p>
</div>
</div>
</a>
Code:
http://jsfiddle.net/VCDe2/1/
Appreciate any hints/tips!
Here's a JSFiddle to show you what's happening.
jQuery:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
Simple enough! Adaam's fiddle in the post above certainly does work, but I'd recommend not using it as it will only work for one item - you'll need to add more code for every new section you create.
This solution, however, will look for any h1 item when it is clicked, and then find the next .hidden class item closest to it, allowing you to add as many different areas as you want.
For instance, with the same code above, you can scale everything up to work like this with no extra jQuery script.
All you have to do to incorperate it into your project is make sure your .hidden equivalent is nested inside of a container with the rest of the section, and change h1 and .hidden to fit your proper classnames. Make sure they're classnames, as IDs will not work.
I have tried to enabled a banner in my opencart shop.
The site is PHP, i basically just need a banner at the top of the page to alert users that don't have JS turned on to turn it on.
i used
<noscript>
<div id="noscript-warning">We reccomend using javascript for the best viewing pleasure ></div>
</noscript>
However this does not seem to be executing.
Not getting feedback from comments, so I'll post possible issues.
You're testing with JavaScript enabled
Your CSS styling of the element is hiding the message
Your CSS styling of other elements is hiding the message
You've posted a modified example that doesn't reflect the actual code
Your trailing > is breaking the layout in whatever browser you're using to test (not likely)
You're attempting to generate the no-script element using JavaScript :P
The <noscript> tag is anecdotally deprecated (http://www.html-5.com/changes/noscript-tag.html), though I doubt that's the problem.
In any case, you can just create a script that removes a "You need Javascript enabled" div.
<div id="jserror">Enable Javascript Please!</div>
<script>
document.getElementById("jserror").style.display = "none";
</script>
Edit: an eventListener isn't even required.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.