First off, I am not good at this, i found similar questions with answers but those did not end up in me being able to fix my own problem.
My problem is as follows: a button that when clicked reveals a div with content.
Closest i have gotten was using only html and css, where clicking the button would result in keeping its own div hidden and showing the others (basicly the exact opposite of what i wanted to achieve). After I had done getting my 'feel' back for html/css i started with javascript and rewriting stuff.
Resulting in this: (html)
$(document).ready(function () {
$("#button").click(function (){
var target = '#' + $(this).data('target');
$("#hidden-div").slideUp()
$(target).slideDown()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class ="list" id="list">
<li>Splash page.
<button class="btn-list" data-target="splash-div" id="splash-btn">Explanation</button><br>
<div class="hidden-div" id="splash-div">blablabla</div><br>
<a class="listlink" href="#splash">Take me there!</a></li>
<li>Interactive list.
<button class="btn-list" data-target="list-div" id="list-btn">Explanation</button><br>
<div class="hidden-div" id="list-div">blablabla</div><br>
<a class="listlink" href="#list">Take me there!</a></li>
</ul>
</section>
</div>
EDITTED CODE.
I have tried .css(instead of show), first trying hidden true/false and after content: none/block.
Content none/block is how i got to make it 'work' without using javascript.
Am i missing something obvious? Or am i trying by using the wrong functions?
According to your request I have updated your Q structure and applied a function that is suitable for your situation. If this is not what you want, please comment I will restructure it and answer as per your need. Hopes this help.ty!
UPDATED CODE FOR YOU
$(document).ready(function() {
$("body").on('click', '.btn-list', function() {
$(".hidden-div").hide();
$(this).closest(".hideClass").find(".hidden-div").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li class="hideClass">
<p>Splash page1.</p>
<button class="btn-list" data-target="#splash-div" id="splash-btn">Show me more</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<a class="listlink" href="#splash">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page2.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page3.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page4.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
<li class="hideClass">
<p>Splash page5.</p>
<button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
<a class="listlink" href="#list">Take me there!</a>
</li>
</ul>
</section>
</div>
Check this out, should solve your problem.
$(document).ready(function() {
$("#splash-btn").click(function() {
$("#splash-div").show();
});
$("#list-btn").click(function() {
$("#list-div").show();
});
});
.hidden-div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li>Splash page.</li>
<button class="btn-list" id="splash-btn">Show me more</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<button class="btn-list" id="list-btn">Show me more</button><br>
<div class="hidden-div" id="list-div">blablabla</div>
</ul>
</section>
</div>
$(document).ready(function() {
$("button").on('click',function() {
debugger;
var selecteddiv = $(this).attr("id") + '-div';
$("#"+selecteddiv).toggle();
});
});
.hidden-div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" id="main">
<section class="listview">
<h1 class="title">List of functions used on the page</h1>
<ul class="list" id="list">
<li>Splash page.</li>
<button class="btn-list" id="splash">Show / Hide</button><br>
<div class="hidden-div" id="splash-div">blablabla</div>
<button class="btn-list" id="list">Show / Hide</button><br>
<div class="hidden-div" id="list-div">sdfsdfsdfsdf</div>
</ul>
</section>
</div>
Related
I want to remove the All option in filtering element. How can I do that?
I removed the line for 'all' , but it is still showing.
<div class="row">
<div class="col-lg-12">
<ul id="portfolio-flters">
<li data-filter=".filter-app">Dhaka</li>
<li data-filter=".filter-card">Rajshahi</li>
</ul>
</div>
</div>
Use This One
First add jQuery link and than copy jQuery code and paste it..
$('#portfolio-flters li').removeAttr("data-filter");
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<ul id="portfolio-flters">
<li data-filter=".filter-app">Dhaka</li>
<li data-filter=".filter-card">Rajshahi</li>
</ul>
</div>
</div>
</body>
</html>
So, I created this script which works nice:
$(function() {
$(".decorrer").click(function(e) {
x = jQuery('#1').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".Futuras").click(function(e) {
x = jQuery('#2').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".Passadas").click(function(e) {
x = jQuery('#3').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".2017").click(function(e) {
x = jQuery('#sete').clone().attr("id","something");
jQuery('#something').replaceWith(jQuery(x));
});
<div class="col-md-3" id="status">
<ul>
<li class="decorrer">A decorrer</li>
<li class="Futuras">Futuras</li>
<li class="Passadas">Passadas</li>
<li class="2017">Passadas</li>
</ul>
</div>
<div class="col-md-7" id="dinamics">
</div>
<div style="display:none;">
<div id="1">
<p>content1</p>
</div>
<div id="2">
<p>content2</p>
</div>
<div id="3">
<div class="col-md-1" id="years">
<ul>
<li class="2016">2017</li>
<li class="2015">2016</li>
</ul>
</div>
</div>
<div class="col-md-6" id="pastExpos">
<div id="something">
<h3>something</h3>
</div>
</div>
<div id="sete">
<div class="col-md-6">
<h3>dezassete</h3>
</div>
</div>
</div>
But as soon as I change the li class="2017" from the ul under div class="status" to the ul under div class="years" (which is its intended placement), it stops working. Can you help?
Thank you
When you change the <li> class, you have to change in your Jquery too :
$(".2017").click(function(e) {
x = jQuery('#sete').clone().attr("id","something");
jQuery('#something').replaceWith(jQuery(x));
});
Because you're selecting the 2017 class, if you change in HTML and not in Jquery, the selector will point to nothing.
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
I have two forms and each form has different a tag, but when I use Javascript to use a tag different form, I can work on the a tag from the first form. How can make Javascript so that I can work on different a tag from different forms.
My codes are shown below.
Form to sell
<body>
<form class="summarybackground" name="sell" id="sell" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
Form to rent
<form class="summarybackground" name="rent" id="rent" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav-sec">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
</body>
This script can work on the first form's a tag only.
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
How to make a script so that I can work on both forms?
Find your a using it's parent
<script>
$('#rent a').click(function () {
$('#rent a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
You can do similar thing for your next form
I am trying to use the metro UI css library but I can't figure out why my navbar css is not working.
Here's my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>Main</li>
<li>File Open</li>
<li class="divider"></li>
<li>Print...</li>
<li class="divider"></li>
<li>Exit</li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Buy Now</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
The UI is not appearing properly for the nav-bar although I've loaded the required files.What is causing the problem ?
I've copied the navbar code from here.
Change:
<nav class="navigation-bar dark fixed">
To:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
As stated in the documentation:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.
The issue with Metro Bootstrap UI CSS aka http://metroui.org.ua/ is this:
You load the theme to localhost, or mabe into a MCV framework, and the dropdown doesnt work! Right?
Okay so look for this line in the html file
<script src="js/load-metro.js"></script>
This is where the problem is.
You can open this file and see the contents - its best to use a full url to include the JS files. I myself removed this line from my files:
<script src="js/load-metro.js"></script>
And I replaced it with the contents:
<script type="text/javascript">
$(function(){
if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
} else {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
}
})
</script>
now you will notice I use base_url() - this is for my case only. Replace that with your full url and walla the dropdown should be working.