Jump to content

Search the Community

Showing results for tags 'Toggle'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 8 results

  1. Hi there, I’m a newbie in coding HTML, CSS (very poor in JS) and I would like to make a responsive navbar like that: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp (here the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav). My question is, when the navbar is in “responsive mode” and when clicking the menu button (right side in the example), is it possible to produce a "fade in/out" effects in order to display the menu items? Thank you in advance for your time and for any help you can provide. Sergio
  2. Hi I would like to customize a specific toggle slider. I managed to make the example larger, but now the toggle moves only a little and not across the entire switch. ( I set width to 160 in the .switch class) example: <!DOCTYPE html> <html> <head> <style> .switch { position: relative; display: inline-block; width: 160px; height: 34px; } .switch input {display:none;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } </style> </head> <body bgcolor='teal'> <center><br><br> <h2>Toggle Switch</h2> <label class="switch"> <input type="checkbox"> <div class="slider"> Tekst</div> </label> <br><br> </center> </body> </html> So anyone any suggestions how to slide the toggle over the entire switch?
  3. There is a rough sample of what's going on at saczee.com/ZTEST/build20-11.html Pay little attention to the code, though. It deliberately violates "best practices" and is less than half done. It simply gives an idea of what the mega-menu structures are intended to do. Also keep in mind, the positions and sizes of the mega-panels are not fixed - and will change from edition to edition (of an online newspaper). The solution, if there is one, must be something that works independent of other features of containers and their styling. It needs to pretty much confine itself to matters of visibility in hovered and toggled states and invisibility at other times. Setup: Its a routine inline-block navbar. there's underlayment containers for certain function and class switches on the list-items themselves for certain functions (on/off/active/dropdown/etc...) nothing special. the anchors are kept relatively clean and have no function except those without submenus - they serve as links - the others just serve as titles for submenus. Straightforward to that point. There are also two primary types of li links - ones that will have dropdown menus of some sort, others that will have mega-menu like panels that use divs as their principle content containers rather than ul/li submenus. Problem: The problem is handling the event actions on the list items. In particular, the gaps or deadspace if one is in hover mode. The mega-panels may be absolutely positioned anywhere on the page. So, when one hovers a navbar link the panels appear, but in traversing to the panel one must pass through unhovered-space (containers that are not associated (often cannot be) with the navbar structure at all. I can get the panels to appear, I can move them around and size them as I wish. I cannot manage to 1) keep them visible when leaving the link to go to them, 2) keep the link hover style active when I leave the list-item. My visibility is controlled with opacity, visibility and overflow and the panels put in block mode when visible (for a variety of reasons I do not wish to use negative margins or display:none properties to handle visibility.)What I've looked at a lot of toggle featured solutions like bootstrap and such. don't want to use them. Other simpler solutions I've seen with jquery, js and css combinations just miss what I'm trying to accomplish. I'm guessing some combination of css and js will do the trick, but I've no js experience. What I'd settle for: To be able to hover from the li to the separate div panels without losing the hover effect on the link or the visibility of the mega-panel. When the pointer is on the panel, both visibilities should remain. Then, when the hover is removed from the panel the panel should become invisible again and the style on the link go back to its unhovered state. What I'd like is: on hover the link styling for hover lights up and the mega-panel appears (stays on as long as the link is hovered. One can then travel to the panel and both elements remain in hover state. if one then clicks either the link or the panel, both are toggled and retain the hovered state visibility. If either are then clicked, then the panel becomes invisible and the link loses its hover styling when the pointer leaves it. I figure the thing takes a combination of js and css classes to put on the event initiators and their targets. If anyone has seen this somewhere or has/can create something like that, my thanks in advance. I haven't found anything like it elsewhere.
  4. Hello! I have posted about this topic on Stack Overflow, but the responses I get seem to be a tad above my head, and I think they get impatient with my rudimentary knowledge. I'd like to post my question here, as a student and see if I can get an answer: What I want is to toggel two different passages one in French and one in English from hidden to visible. Here's the blog entry I'm talking about; http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee I would like to separately hide or show either the French or the English passage. Here's what the suggesion was at Stack Overflow: <!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><p style="display:none">If you click on the "Hide" button, I will disappear.</p><button id="hide">Hide</button><button id="show">Show</button></body></html> But this either hides or shows BOTH passages. How can I toggle them on or off INDEPENDENTLY? Any help would be appreciated. Barry
  5. Hi everyone,I've been slaving over some code for a week now trying to get a Jquery slide toggle to work.Basically, I have an image in a div (#pulldown_tab), which I'd like to trigger the panel with copy (#cream_of_the_craft)Much appreciate anyone's help keeping my hair from falling out! Files attached. index3.html pencilpaperandpartner3.css
  6. How do I use this script for multiple element which works independently on the same page, can anyone help please.. <script type="text/javascript" >$(document).ready(function() { $(".slideDiv").hide(); $(window).load(function () { $(".toggle").click(function () { $(".slideDiv").slideToggle(800);<!----change to any amount or use presets "slow" "fast" etc-----> });});});</script> The html bit: <div class="toggle"> Click To Read More</div><div class="slideDiv"> <div class="p-text-wrap-box-1-left"> <p>We are a company providing tours, siteseeing, outing and contractual service to tourist industry and includes hotels and tourists related businesses. We run a pre-booked system and we are always ready to be on the move at any given time. <a href="about.html">Read more</a> about us.</p> </div><!--ends p-text-wrap-box-1-left--></div><!--slideDiv-->
  7. hey all, im really new to this and could really do with some help, it would be hugely appreciated!i have a toggle type setup for a list of live events but i cant seem to find an easier way or cleaner way to use it, any ideas? here is the code im using at the moment, sorry in advance for the way this is done! i need the setup to have neat slide down tables of info. Code as follows: <script type="text/javascript">// <![CDATA[var Current = "Div1";function Toggle(obj) {if(Current != obj) {document.getElementById(Current).style.display = "none";document.getElementById(obj).style.display = "block";Current = obj;}}// ]]></script><p style="text-align: center;"><em><strong><span style="background-color: #ffffff;"><a href="#" onclick="Toggle('Div1'); return false;"><span style="background-color: #ffffff;">Monday</span></a> | <a href="#" onclick="Toggle('Div2'); return false;"><span style="background-color: #ffffff;">Tuesday</span></a> | <a href="#" onclick="Toggle('Div3'); return false;"><span style="background-color: #ffffff;">Wednesday</span></a>| <a href="#" onclick="Toggle('Div4'); return false;"><span style="background-color: #ffffff;">Thursday</span></a>| <a href="#" onclick="Toggle('Div5'); return false;"><span style="background-color: #ffffff;">Friday</span></a> | <a href="#" onclick="Toggle('Div6'); return false;"><span style="background-color: #ffffff;">Saturday</span></a> | <a href="#" onclick="Toggle('Div7'); return false;"><span style="background-color: #ffffff;">Sunday</span></a></span></strong></em></p><div id="Div1" style="display: none;"><table border="0" rules="all" align="center"><tbody> For some reason when i click monday it actually does nothing, but if i click tuesday, then monday the info is there??
  8. Hey everyone! Happy new year! So I have been working with this toggle function:variable == '' ? '' : ''In simple variable is what your toggling, then you have a parameter and if (if = ?) the second parameter is false (which you want it to be) it will do else (else = the third parameter.Now it works 99% of the time and I am having trouble when I use the img element.This is my code, any help? HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Map</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="js/buttons.js"></script></head><body><h2>Street View</h2><hr /><a onclick="oiseMap(this)">Interactive Map</a><div class="oiseMap"><img src="http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png" width="700" /></body></html> JavaScript function oiseMap(a) {var element = a.nextSibling;while (element.className != 'oiseMap') {element = element.nextSibling;} element.innerHTML = element.innerHTML == '<img src=\"http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png\" width=\"700\" />' ? '<iframe width=\"700\" height=\"500\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&output=embed\"></iframe><br /><small>View <a href=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&source=embed\" style=\"color:#0000FF;text-align:left\">OISE</a> in a larger map</small>' : '<img src=\"http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png\" width=\"700\" />';} My goal is to have the map switch from the iFrame to the image and back, the flip flop. It does not work. It always reloads the iframe... Any ideas? Thanks!
  • Create New...