I am using this code on my forum postbit. I am trying to have a div element reveal some text for each user but I can only get it working for the first user.
The other divs are always open. I am not sure where I'm going wrong with it.
function toggleDiv(id) {
$("#" + myContent).toggle();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
Reveal text here.
</div>
Don't you mean $("#" + id).toggle(); ?
If you look at the console, you will see an error message saying that myContent is undefined.
You cannot concatenate a String ('#') with an undefined variable in JavaScript.
function toggleDiv(id) {
$("#" + id).toggle();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
Reveal text here.
</div>
A couple of changes here:
Add the jQuery source. Add this script tag above your script tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: it appears Mr. Polywhirl has added this to your sample.
Utilize the id parameter in function toggleDiv()
i.e. $("#"+id).toggle();, unless myContent is defined elsewhere, it will be undefined so $("#" + myContent).toggle(); will cause an error.
To have the content initially hidden, add the style display: none.
Remove the fadeIn class name initially and add it after toggling the element using .toggleClass().
See the updated example below.
As far as when to show the message for the first user, we need to know what your business logic is for that concept. Can you tell what the pid (or uid, given this list of fields in their API for posts) value is of the first user, perhaps based on a given list of posts in MyBB? You mention that this code is at the top of the page: <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>. So if you knew a certain pid value (e.g. 1337) you could conditionally add the code to add the message to the DOM - e.g.
$html = '';
if ($post['pid'] == 1337) {
$html .= '<a href="javascript:toggleDiv(\'myContent\');">';
}
//add $html to the rest of the HTML outputted to the page
function toggleDiv(id) {
$("#" + id).toggle().toggleClass('fadeIn');
}
.animated {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
.fadeIn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
<div class="animated" id="myContent" style="padding: 10px; display: none">
reveal text here
</div>
Your function takes a parameter id, but you're using myContent i the body of the function. Like this it works:
function toggleDiv(id) {
$("#"+id).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw">icon here</i>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
reveal text here
</div>
You are using myContent instead of id inside the function, replace that and it should work:
function toggleDiv(id) {
$("#" + id).toggle();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
Reveal text here.
</div>
Related
I'd like to use the popover to reduce the place taken on my website to delete something.
I created a popover in my view :
<a
class="btn text-muted"
data-toggle="popover"
data-placement="bottom"
tabindex="0"
data-content='
<a
href="#"
class="remove-template {{ index }}"
data-index="{{ index }}"
>
remove template
</a>
'
>
<span class="fa fa-trash"/>
</a>
I try to use it in my javascript code as such
import $ from 'jquery';
import 'bootstrap';
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$(".remove-template").click(function (event) {
event.preventDefault();
var index = $(this).data('index');
//for debugging
alert($(this).attr('class'));
alert($(this).attr('data-index');
$("#li-field-"+index).remove();
updateTemplate();
});
});
as an output I get a first alert that shows
remove-template 0
So I know that the {{ index }} variable is set in my view but for the second one I get
undefined
Isn't it possible to set data-x attr on a popover directly in the data-content attr ?
EDIT:
I created a code snippet trying to reproduce the behaviour of my page and of course it work smoothly...
$(document).ready(function () {
$("#pop").popover();
});
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$('.remove-template').click(function(){
var index = $(this).data('index');
alert("index in the link = "+index);
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="pop" data-content='<a
href="#"
class="remove-template 0"
data-index="1"
>
remove template
</a>'>
<span class="fa fa-trash mr-1"/>
Send to the trash
</button>
</div>
So apparently the problem is somewhere else. In any case as it is not reproductible this question doesn't make sense any more.
Actually, you are using the .click() function which is listening a click javascript event on the given jQuery object.
But like i said before is that jQuery will not be able to listen this event cause you generated this html node after DOM generation.
To fix your problem, you'll need to listen an already existing object (like body) and then watch the html class you want: see example
function addBlock() {
var test = '<div class="foo" data-test="after">X</div>';
$('#container').append(test);
}
$(document).ready(function() {
addBlock();
addBlock();
});
// This will work
$('body').on('click', '.foo', function() {
$('#bodyClickEvent').empty();
if (!$(this).hasClass('staticFoo')) {
$('#clickEvent').html('<span></span>');
}
$('#bodyClickEvent').html($(this).data('test'));
});
// This part of code will not work
$('.foo').on('click', function() {
$('#clickEvent').empty();
$('#clickEvent').html($(this).data('test'));
});
.foo {
display: inline-block;
width: 50px;
height: 50px;
background-color: rgb(50, 50, 50);
margin: 5px;
padding: 5px;
color: white;
}
.staticFoo {
background-color: blue;
}
.event {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="description">
<ul>
<li>Y block are write in the HTML and generated with the DOM generation.</li>
<li>X block are generated with a javascript function.</li>
</ul>
<p>Try to click on different blocks to see what append.</p>
</div>
<div id="container">
<div class="foo staticFoo" data-test="before">Y</div>
<div class="foo staticFoo" data-test="before">Y</div>
</div>
<div class="event">click event data: <b id="clickEvent"></b></div>
<div class="event">body event data: <b id="bodyClickEvent"></b></div>
As mentioned in comments earlier accroding to jquery doc for setting value you have to use:
$( "body" ).data( "foo", 52 );
Then, to get any data value you should use:
$( "body" ).data( "foo" ); // 52
My code is this with included FontAwesome 4.7
Js code:
$('#icon').click(function(){
$(this).attr("class", "fa fa-iconA");
Html code:
<i id="icon" class="fa fa-iconB" aria-hidden="true"></i>
I wish that the iconA - iconB swap after click is animated, like fadeout/fadein.
How can I do? Is it the right way to swap between 2 icons after a click?
You cannot fadeIn, FadeOut icon like this by changing their class.
In order to create a fadeIn and FadeOut effect, you need to play with opacity.
Please try below example
jQuery('.icon').click(function(){
jQuery('.icon').toggleClass('hidden');
})
.icon-wrap{
position:relative;
background:#333;
height:25px
}
.icon-wrap .icon {
color:#fff;
position:absolute;
left:0;
top:0;
transition:linear all 0.5s;
cursor:pointer;
}
.icon-wrap .icon.hidden{
opacity:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ICON Example
<div class="icon-wrap">
<i class="fa fa-twitter icon icon1"></i>
<i class="fa fa-facebook icon icon2 hidden"> </i>
</div>
Click on icon to see effect
I'm using Bootstrap as UI framework, what I'm trying to do is make a push menu on the left. Actually, I almost achieve this result, but there are some bugs on the system. In particular, I'm not able to get the menu inline. See the code for more details:
HTML
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="resource-bar" class="sidenav col-sm-2">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource"
class="form-control resource-filter"/>
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
<div id="calendar-container" class="col-sm-10">
<div id="calendar" class="well"></div>
</div>
</div>
</div>
</div>
<br><br><br>
<button type="button" id="show" >Show</button>
<button type="button" id="hide" >Hide</button>
Note that the html above is adapted for a fiddle example.
CSS
.sidenav
{
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
}
#calendar-container
{
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
}
JS
$(document).ready(function()
{
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function()
{
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
The result when the menu on the left is closed:
Seems that both divs are inline, the problem occurs when I press show button and the menu appears:
BUG actually noticed:
When the menu is opened I get the divs in two line instead of one row
Adding the class col-sm-2 to resource-bar the overflow-x: hidden; doesn't working, in fact, seems that the menu is visible when it should be closed.
col-sm-2 does not go in another line when the minimum resolution of the screen doesn't have enough space in width.
Someone could help me to fix this issues? Thanks. JSFIDDLE.
Edited to another workaround which wouldn't affect bootstrap grid:
With this setup sidebar would be absolute, since it's out of viewport and you set it to a fixed width (250px), using the grid wouldn't be necessary.
Visible input will not overflow once sidebar shows.
Raised buttons above sidebar.
Note the HTML structure was tweaked.
$(document).ready(function() {
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function() {
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function() {
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
div.sidenav {
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* added absolute to sidenav since it will have fixed width anyways */
position: absolute;
}
#calendar-container {
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
/* this is just to vertically align with sidebar input */
padding-top: 36px;
}
button {
position: relative;
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="calendar-container" class="col-sm-12">
<div id="calendar" class="well"></div>
</div>
<div id="resource-bar" class="sidenav">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource" class="form-control resource-filter" />
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<button type="button" id="show">Show</button>
<button type="button" id="hide">Hide</button>
You're issue lies with the mix of bootstrap and your own JavaScript generated style. It seems you already have knowledge of the Bootstrap Grid layout, but to reinforce, https://v4-alpha.getbootstrap.com/layout/grid/ will tell you that there are 12 columns in a row.
Each column is styled by Bootstrap to a set width with set margins in between. You've have all 12 columns filled up in your row. As you add an additional margin to your already-filled-up calendarContainer column, it will pop out of the row.
Therefore, the easiest way to achieve what you want without affecting any other styles is too make your column smaller and reduce the amount of 'margin-left' you push on the column like so https://jsfiddle.net/Zeenglishking/DTcHh/28837/
<div id="calendar-container" class="col-sm-8">
<div id="calendar" class="well"></div>
</div>
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '50px');
});
Also, as you say "seems infact that the menu is even visible also when is closed.", the menu is indeed visible. This is again down to the fact of the bootstrap styling of the grid-layout. If you can figure out what styles are creating this issue (F12), you can override them using "something:!important". https://css-tricks.com/snippets/css/style-override-technique/ . Otherwise, find another way. If you mess around with css positioning elements too much, it's easy to get lost and jumbled with the rest of your code.
EDIT (in regard to comment):
What needs to be used in addition to this is 'col-xs-**' with a smaller size column, allowing for a responsive design and for it to work on the smaller viewports such as the one in JSFiddle. I have updated my fiddle to include
col-xs-1
and
col-xs-4
on resource-bar and calendar-container respectively. This will change the size of the column, upon resize of the screen/viewport to ensure it doesn't drop down on extra-small viewports. More info at http://getbootstrap.com/css/#grid-options
Upon using Bootstrap framework you almost acquire yourself to a certain standard. Shortcuts in fixing this can cause problems with other elements. You're probably best to read more into it before chucking random positioning in to fix certain elements on a page.
My menu is sliding from right to left on click.
There is an arrow button to open the menu.
To close the menu I need to change the direction of that button.
Please help me with this.
HTML
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="fa fa-home"></i>Home
<i class="fa fa-diamond"></i>My Wedding
Venue List
About
Contact
</div>
<!-- Menu button -->
<div id="menuToggle" class=""><i class="fa fa-angle-left"></i></div>
</nav>
JavaScript
(function () {
// Menu settings
$('#menuToggle, .menu-close').on('click', function () {
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
})(jQuery);
You can add the class of the fontawesome icons rotation .fa-rotate-180 adding this line inside your on click function
$('#menuToggle').find($(".fa")).toggleClass('fa-rotate-180');
You can also add a rotate effect with the css animation
#menuToggle i{
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}
I have created tab style interface using css and javascript with only two tabs which is working fine.But i want to add more tabs to it and i am not getting how can i write javascript code for it to show current active tab and its contents and hide all other tabs and their contents
Following is my html code :
<div id="container">
<div id="tabbox">
Signup
<a href="#" id="login" class="tab select">Login</a>
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
</div>
This is my javascript code :
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
});
});
This is working fine for two tabs but if i add more tabs to it say :
<div id="container">
<div id="tabbox">
Signup
<a href="#" id="login" class="tab select">Login</a>
Basicinfo
contactinfo
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
<div id="basicbox">Basic information</div>
<div id="contactbox">Contact information</div>
</div>
</div>
Then if i use previous javascript function i will have to add lot more lines to it and i am not getting how can i do it in short and simple way.
What changes do i have to make in my javascript function..
I'd suggest the following:
$(".tab").click(function()
{
var x = this.id, // equivalent to $(this).attr('id'), but slightly faster/more-simple
show = $('#' + x + 'box');
if (show.length){
$('.contentBox').slideUp(500);
show.slideDown(500);
}
});
JS Fiddle demo.
Or the following (equivalent to the above, but using a callback):
$(".tab").click(function()
{
var x = this.id,
show = $('#' + x + 'box');
if (show.length){
$('.contentBox')
.slideUp(500,
function(){
show.slideDown(500);
});
}
});
JS Fiddle demo.
This assumes the following:
That all of the 'boxes' you want to show have the class of contentBox,
That the id of the 'box' you want to show takes the form of the id of the link that's clicked followed by the word 'box', so clicking the #signup link reveals #signupbox.
Edited to include a CSS-only option:
With the following HTML:
<div id="container">
<div id="tabbox">
Signup <!-- note the href -->
Login
</div>
<div id="panel">
<div id="loginbox" class="contentBox">Login Form</div>
<div id="signupbox" class="contentBox">Signup Form</div>
</div>
</div>
And the CSS:
.contentBox {
height: 0;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ms-transition: height 1s linear;
transition: height 1s linear;
overflow: hidden;
}
.contentBox:target {
height: 2em;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ms-transition: height 1s linear;
transition: height 1s linear;
}
JS Fiddle demo.
You are mixing ids (that have to be unique - you are using them multiple times) and classes in a weird way (you did before your edit...).
For a basic setup like:
<div id="container">
<div id="tabbox">
A <!-- note the URL fragments pointing to actual ids -->
B
C
D
</div>
<div id="panel">
<div id="A" class="tab">A Content</div> <!-- ID attributes are only used once -->
<div id="B" class="tab">B Content</div>
<div id="C" class="tab">C Content</div>
<div id="D" class="tab">D Content</div>
</div>
</div>
You could just use some lines of jQuery to get things working:
$('div.tab').hide().first().slideDown(); //show first
$('a.tab').click(function(){
var targetID = $(this).attr('href'); //store element that triggered the click event
$('div.tab:visible').slideUp(function(){ //hide visible tab
$(targetID).slideDown(); //slide down newly selected tab
});
});
See a working fiddle
Also read about ids and classes at MDN
Not tested but maybe works:
Javascript:
$(document).ready(function(event) {
$("#tabbox a:not(.selected)").click(function() {
$($("#tabbox a.selected").attr('href')).slideUp();
$("#tabbox a.selected").removeClass('select');
$(this).addClass('select');
$($(this).attr('href')).slideDown();
event.stopPropagation();
});
});
HTML:
<div id="container">
<div id="tabbox">
Signup
Login
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
</div>
if you give a class to the content divs before you open one tab you can close all the others e.g.
$(".tab-content").slideUp();
$("#loginbox").slideDown();
You also need to know which tab you have clicked on e.g.
$(".tab").click(function(){
var id = this.id;
var current_tab_content = '#'+id+'box';
$(".tab-content").slideUp();
$(current_tab_content).slideDown();
});
I have not tested this but hopefully you get the idea.