Sorry, I speak English very badly.
I have one form that, when called from various buttons, should hide some fields.
Here are the buttons:
<a data-target="#call">Button 1</a>
<a data-target="#call">Button 2</a>
Here is the form:
<div id="call">
<form>
<div class="pole1">Field 1</div>
<div class="pole2">Field 2</div>
</form>
</div>
A form can have only one ID, in my case it is a "call".
How to make that when you click on the "Button 1" only displayed "Field 1"?
How to make that when you click on the "Button 2" only displayed "Field 2"?
Try with this.
<!DOCTYPE html>
<html>
<body>
<a href="#" onclick='myFunction1()'>Button 1</a>
Button 2
<div id="call">
<form>
<div class="pole1" id="Field1Id">Field 1</div>
<div class="pole2" id="Field2Id">Field 2</div>
</form>
</div>
<p id="demo"></p>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
function myFunction1() {
$("#Field1Id").show();
$("#Field2Id").hide();
}
function myFunction2() {
$("#Field1Id").hide();
$("#Field2Id").show();
}
</script>
</body>
</html>
Please try this
<a data-target="#call" onclick="show('id1');">Button 1</a>
<a data-target="#call" onclick="show('id2');">Button 2</a>
Here is the form:
<div id="call">
<form>
<div class="pole1" id="id1" style="display:none">Field 1</div>
<div class="pole2" id="id2" style="display:none">Field 2</div>
</form>
</div>
javascript code :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function show(elementId)
{
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
Related
I have an html file, which displays in Firefox as:
Problem is, I want to have everything in one single horizontal row next to each other:
the label Dropdown,
the dropdown box itself,
the bootstrap nav-pills menu and
the separate link.
My code is (jsfiddle: https://jsfiddle.net/aq9Laaew/162055/):
$(document).ready(function() {
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`);
}
$('header a').first().addClass('active');
$('header a').click(function() {
console.log($(this).data('value'));
});
});
<meta charset='utf-8' />
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body>
<header>
<div class="form-group">
<label for="dd1">Dropdown:</label>
<select class="form-control" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<ul></ul>
Seperate Link
</header>
</body>
</html>
I tried
add css style="display:inline-block" to <div>, <ul> and <a> elements
use a bootstrap grid as described in https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
But nothing worked so far.
Use class="row" to wrap div and wrap divs in col-*
Learn here:https://getbootstrap.com/docs/4.0/layout/grid/
$(document).ready( function(){
let menus = ['Menu1', 'Menu2', 'Menu3'];
$('header ul').addClass("nav nav-pills");
for (let m of menus) {
$('header ul').append(`<li class="nav-item">
<a class="nav-link" data-value="${m}" data-toggle="pill" href="#">${m}</a>
</li>`
);
}
$('header a').first().addClass('active');
$('header a').click(function(){
console.log($(this).data('value'));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<header>
<div class="row">
<div class="form-group col-5">
<label for="dd1 col-form-label" >Dropdown:</label>
<select class="form-control d-inline-block col-8" id="dd1">
<option>Value1</option>
<option>Value2</option>
</select>
</div>
<div class="col-7 d-flex">
<div class="col-9 p-0">
<ul></ul>
</div>
<div class="col-3 pt-2">
Link
</div>
</div>
</div>
</header>
When I click outside the menu the drop-down menu is not closing. I have tried with functions but I was not able to solve it.
<div onclick="document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden')"; class="custom-menubutton">
<i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
</div>
</div>
<div class="custom-menu-cont hidden">
<div class="custom-menu">
<div class="arrow-up"></div>
<div>
<div class="custom-menu-item">
<a href="http://blog.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
<p class="custom-title">Blogs</p></a>
</div>
<hr style="margin-bottom: 10px; margin-top: 10px;">
<div class="custom-menu-item">
<a href="https://susper.com/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
<p class="custom-title">Susper</p></a>
</div>
<div class="custom-menu-item">
<a href="https://chat.susi.ai/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
<p class="custom-title">Susi</p></a>
</div>
<div class="custom-menu-item">
<a href="https://loklak.org/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
<p class="custom-title">loklak</p></a>
</div>
<div class="custom-menu-item">
<a href="https://phimp.me/" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
<p class="custom-title">Phimp.me</p></a>
</div>
<div class="custom-menu-item">
<a href="https://pslab.fossasia.org" target="_blank">
<div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
<p class="custom-title">PS Lab</p></a>
</div>
<hr style="margin: 10px">
<div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
More on labs.fossasia.org
</div>
</div>
</div>
</div>
What changes I have to do to close the menu?
help me to close the dropdown menu.
Thanks in advance
You can use javascript to achieve that.
function hideDiv(){
document.getElementsByClassName('custom-menu-cont')[0].classList.remove('hidden');
}
document.addEventListener("click", hideDiv, false);
You can also remove onclick from <div class="custom-menubutton"> and write in javascript as it is a better convention.
function hideDivStopPropagation(e) {
document.getElementsByClassName('custom-menu-cont')[0].classList.toggle('hidden');
e.stopPropagation();
}
document.getElementsByClassName('custom-menubutton')[0].addEventListener("click", hideDivStopPropagation, false);
The easier way is to use JQuery.
$(document).on('click', function() {
$('.custom-menu-cont').toggleClass('hidden');
});
$('.custom-menubutton').on('click', function(e) {
e.stopPropagation();
$('.custom-menu-cont').toggleClass('hidden');
});
Note: I used e.stopPropagation() because, when you click on the div.custom-menubutton, It means I clicked on document too. So it runs hideDiv function and hides the menu always(Even if you click div to open dropdown). So e.stopPropagation() prevents your click propagating all the way to the document.
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
I have been trying this in any possible way, I can not figure out what is wrong here.
Here is my code
http://jsbin.com/xeroborohe/edit?html,output
and this is how I link my css
<link rel='stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />
For some reasons the line that links to the Google drive stored style sheet is not working,. I ahve also tried to link the file locally on my drive..no luck
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
window.toggleDiv = function(divId) {
var ele = document.getElementById(divId);
var state=jQuery(ele).is(':visible');
jQuery(ele).toggle();
state=jQuery(ele).is(':visible');
localStorage.setItem( divId, state);
}
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$(".collapsible").each(function(index) {
if (typeof($(this).attr('id'))!="undefined") {
id=$(this).attr('id');
var state = localStorage.getItem(id);
ele = document.getElementById(id);
if (state=="true") {
ele.style.display = 'block' ;}
else {
ele.style.display = 'none'; }
}
});
});
})(jQuery)
</script>
<link rel="stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />
<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');" style="font-
size:13pt">Root</a><br>
<div class="collapsible" style="display:none " id="PktS/h+L5EeSqM/4hMH9JA==">
<a class="ConceptLevel2" href="javascript:toggleDiv('KlHtq+Xe60essn+0zs9E6g==');" style="font-
size:12pt">level 1</a><br>
<div class="collapsible" style="" id="KlHtq+Xe60essn+0zs9E6g==">
<div>Level 2</div>
<a class="ConceptLevel3" href="javascript:toggleDiv('EdMUp+28okWIWHVbvUaU1g==');" style="font-
size:11pt">Level 2</a><br>
<div class="collapsible" style="" id="EdMUp+28okWIWHVbvUaU1g==">
<a class="ConceptLevel4" href="javascript:toggleDiv('wIZCSCx/Xk2YShMAkF33Pg==');"
style="font-size:10pt">Level 3</a><br>
<div class="collapsible" style="" id="wIZCSCx/Xk2YShMAkF33Pg==">
<div>Level 4</div>
<a class="ConceptLevel5" href="javascript:toggleDiv('7GKbN5XRqkybT
+XsbHkyqw==');" style="font-size:9pt">Level 4</a><br>
<div class="collapsible" style="" id="7GKbN5XRqkybT+XsbHkyqw==">
<div>Level 5</div>
<a class="ConceptLevel6" href="javascript:toggleDiv
('rV75pTUXp0KP6Mx6EJznDg==');" style="font-size:8pt">Level 5</a><br>
<div class="collapsible" style="display:none "
id="rV75pTUXp0KP6Mx6EJznDg==">
<div class="details">Conclusion: for all the below levels ....</div>
<a class="ConceptLevel7" href="javascript:toggleDiv
('a5qCUDoqI0CPlS4pPGcODQ==');" style="font-size:7pt">Level 6</a><br>
<div class="collapsible" style=""
id="a5qCUDoqI0CPlS4pPGcODQ==">
<div>Level 7</div>
<div>Level 7</div>
</div>
<div>Level 6</div>
</div>
</div>
</div>
<div>Level 3</div>
</div>
</div>
</div>
Update: I have fixed the link, now it leads to a css file https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css
You've got a single quote followed by double quotes in the first attribute in your html tag (the one you link your css with).
Try keeping an eye on your syntax coloring. Stackoverflow already does this.
Try using an IDE("Integrated Development Environment" or code assisting text editor), like Notepad++, Atom, Sublime Text 3, etc.
Google "top 10 ide's".
Good luck.
This is embarrassing, mostly for me (a programmer by night) but it should be more for the pro who rushed to sanction my typos or what they believed it would be typos.
I was using ConceptLevel in the html code and conceptlevel in css
I am wondering why jsbin worked with this
I am newbie in jquery mobile. I got some code from the internet for follow/unfollow button and it works. But the problem is when I click the button, the button changes text but it becomes smaller than another button next to it. This is how it looks:
$(document).on('click', '.followButton', function(e) {
e.preventDefault();
$button = $(this);
if ($button.hasClass('following')) {
//$.ajax(); Do Unfollow
alert("unfollow event");
$button.removeClass('following');
$button.removeClass('unfollow');
$button.text('Follow');
} else {
// $.ajax(); Do Follow
alert("follow event");
$button.addClass('following');
$button.text('Following');
}
});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<a data-role="button" type="button" class="btn followButton" data-role="button" data-theme="b">Follow</a>
</div>
<div class="ui-block-b">
<a data-role="button" type="button" class="btn" data-role="button" data-theme="a">Details</a>
</div>
</div>
</div>
</div>
How can I make the button remain the same size after it is clicked? Thank you.