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.
Related
I am trying to replicate a web page(https://climate-science.com/contact/) using CSS, HTML and JS. I'm quite new to those 3 languages and I am having trouble trying to replicate the FAQ section. I'm having difficulty trying to make the animation, any help?
So far I have this in the HTML file(for 1 question):
<div class="faq-container">
<div class="element-tab-title">
<h4>When do we get more content?</h4>
<p>We put quality over quantity. That said, we have over 50 people working on content. More courses will be coming out over 2020 and new projects will be announced too! Thank you for being patient – we hope it will be worth it.</p>
</div>
</div>
The "faq-container" class contains the style for the grey box and the "element-tab-title" only contains the padding for the text inside. This is the result I have so far: Photo of FAQ section
Any help on how to achieve the animation will be very appreciated.
Usually some simple Javascript would be used to toggle hide/show the 'body' content.
Your 'body' content is currently in your <p> tag, would normally be set to hidden with CSS by default, usually withdisplay:none.
Then with Javascript, you would set an event listener to 'watch' for hover or click action from a user, when you would then change the CSS on the 'content' to be visible again with a different display type - usually display:block.
Here's a starter link on Javascript event listeners: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
As user Geat suggested, you should have a look at Accordions in frontend frameworks. I would suggest looking at Bootstrap framework Accordions (such as https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example) where you can see some of the code and have a look at how it works.
Also, try to learn how to use your browser's developer tools/inspector to view the code as it's being rendered. This is especially helpful when you're trying to see how a live bit of code works as in your case.
If you want a really quick route, HTML5 supports accordions with no JS whatsoever. They're not animated, but they are easy to style and semantically easy to understand (so they're good for accessibility out of the box).
<details>
<summary>Section 1</summary>
<h3>This is section 1</h3>
</details>
<details>
<summary>Section 2</summary>
<h3>This is section 2</h3>
</details>
<details>
<summary>Section 3</summary>
<h3>This is section 3</h3>
</details>
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.
i have following images
<div>
<img src="leftarrow.png"/></br>
<img src="insert.png"/></br>
<img src="edit.png"/></br>
<img src="delete.png"/></br>
</div>
Now what i want is that if a user brings mouse pointer over the image named "leftarrow" a vertical bar should slide in (which should be invisible previously) containing rest of the images i.e "insert", "edit" and "delete" like we have toolbox in Visual Studio etc
thanks in advance :)
This is what I used in my webiste I had to do for IPT: JQuery Effects from W3Schools. This site has "try it yourself" where you can fiddle with the code and get to know and understand the workings of this jquery effect better. In order for it to work, you will need to either download or link to the jquery file (http://www.w3schools.com/jquery/jquery.js)
you can use the slideXX() (where XX = direction) and use the 'speed' parameter to animate it. to your liking.
UPDATE: If you want to make something grow/shrink, you can use the same jquery file, but a different command (specifically either the animate or the toggle commands)
the syntax is: $(selector).animate({params},duration,easing,callback);
for the hide/show commands, the syntax is $(selector).toggle(speed_in_milliseconds);
EDIT: oh, and I almost forgot: use the hide command to hide the buttons on page load
Further information for this can also be found at jquery effects - w3schools.
Hope it helps! If not, just comment and I will see what else can be done
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.
I've written a plugin which inserts photos/video from a popup lightbox into TinyMCE. This worked fine and formatted very well when aligned/wrapped. When it is inserted in HTML like below:
<img src="blah.png" />
But since then I added a feature to allow captioning, which uses a wrapper div such as:
<div class="ImageWrapper" width="x" height="x">
<img src="blah.png" />
Caption here
</div>
There are now a couple of problems I can't fix.
First: How do I allow TinyMCE to format/align the div as it did with img?
Secondly: How do I prevent the user from selecting any of the contents of the div? Instead clicking should highlight the whole div so formatting and deleting works much more smoothly.
The problem is using a <div> as a wrapper, which is apparently not naturally supported by TinyMCE. You have to go further than fidgeting with some css. TinyMCE being a popular editor, people have already tried and come up with a proper solution. Here's someone who's written a plugin: http://www.tinymce.com/forum/viewtopic.php?id=20319
And there's lots of more info to be found if you google for 'tinymce div plugin': http://www.google.com/#q=tinymce+div+plugin
I don't know what would work best in your situation, so I guess you have to try some of the solutions (plpugins) offered.