jQuery not showing requested data on click - javascript

This is pretty much a beginner question. I've bound a little glyphicon to a click event to show some data on click. I've bound stuff to events a million times, but this time it isn't working for some funny reason. Anyway, the click trigger works pretty well, I've tried putting an alert in the callback and it's alright, but it's just the stuff I want to be shown that's not showing.
Anyway, here's my code:
<div class="options">
<span id="resize-toggle" class="glyphicon glyphicon-resize-small valign-middle pointer" title="Resize images during the upload"></span>
<span id="thumb-toggle" class="glyphicon glyphicon-adjust valign-middle pointer" title="Adjust the output thumnail width measured in pixels"></span>
<div id="thumb-options" class="hidden">
<div class="form-group">
<div class="btn-group mg-top" data-toggle="buttons">
<label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label>
<label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110">110</label>
<label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label>
<label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label>
<label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label>
</div>
</div>
</div>
</div>
This is the LESS:
.options {
position: absolute;
bottom: 10px;
right: 10px;
min-width: 500px;
text-align: right;
border: 1px solid black;
.form-group {
display: inline-block;
margin: 0;
}
#thumb-options {
display: inline-block;
}
}
So, the #thumb-toggle is supposed to bring up #thumb-options. I've tried using classes beforehand, but I became desperate and started trying it with IDs.
My original intention is to make the radio buttons slide from the right, pushing the little glyphicons along the way.
Could someone please help me find the issue why the jQuery isn't working and how to achieve that slide to the right effect?
This is the jQuery I've been using:
$('#thumb-toggle').click(function(){
alert('Here we are'); // Works!
$('#thumb-options').fadeIn('fast'); // This doesn't work
});

Here is a jsfiddle for what is descibed below. It is a simplified version of yours that is working.
You didn't show the hidden class, but the problem may be that you are using FadeIn on an element that is invisible. If you want the element to be invisible and therefore contribute to the layout of the dom then you should use something like:
$('#thumb-options').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 200);
If you want to use FadeIn then you will need the $('#thumb-options') to initially have display:none

I would suggest to just toggle the css class and adjust the visiblity with css only.
(I also would not use ids so extensively. You could use classes instead.)
HTML:
<div id="thumb-toggle">Click me</div>
<div id="thumb-options" class="hidden">
...
</div>
Javascript:
var $thumb_toggler = $('#thumb-toggle');
$thumb_toggler.click(function(){
$thumb_toggler.toggleClass('hidden');
});
With the first click on $thumb_toggler the class hidden will be removed from the #thumb-options element. With the next click, the hidden class will be appended to the list of its classes.

first, try making the class "hide" instead of "hidden"
<div id="thumb-options" class="hide">
if it still doesn't work try this:
<div id="thumb-options" style="display:none;">

Related

Extend check zone of a checkbox

I'm programming a menu with two checkboxes inside (mat-menu from Angular with native Javascript checkboxes) and if I'm not clicking exactly in the box that doesn't work, the menu is closing and the box not checked ...
By the way with the mat-menu I haven't found how to block the automatic closure of the menu when I click on it.
Do you have a solution ?
Capture of my menu
<!-- app.component.html -->
<div class="header">
<mat-toolbar color="warn">OpenLayers</mat-toolbar>
<div class="menu">
<button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<p>Piscines : <input type="checkbox" id="piscine" name="piscine" (change)="handleSelected1($event)"/></p>
</button>
<button mat-menu-item>
<p>Parkings : <input type="checkbox" id="parking" name="parking" (change)="handleSelected2($event)"/></p>
</button>
</mat-menu>
</div>
</div>
Here is an easy way of extending the checkbox zone using CSS :after pseudo-element:
p, label, button, .chk-extended{
position: relative;
}
/* The above element position will be taken as reference
for the pseudo-element absolute positioning below:
*/
.chk-extended:after,
.chk-over-elm:after{
position: absolute;
content: '';
border: 1px dotted gray; /* For visibility */
/* The below can be adjusted */
top: -0.5em;
bottom: -0.5em;
left: -0.5em;
right: -0.5em;
}
Regular:<input type="checkbox" />
<br><br>
Extended:<input class='chk-extended' type="checkbox" />
<br><br>
<label>Extended on label:<input class='chk-over-elm' type="checkbox" /></label>
<br><br>
<button>Extended on button:<input class='chk-over-elm' type="checkbox" /></button>
<br>
<p>Extended on p:<input class='chk-over-elm' type="checkbox" /></p>
Note that I used p, label, button as examples in my snippet, but it can work with anything else.
Also, you may need to use !important on the CSS rules to override rules that are already set.
Hope it helps.

How to add an overlay to body when button clicked, and how to clear purplecoat content on pageload

I have two issues/questions...
Question #1:
I am using a label overlay plugin called purplecoat.js (http://ellekasai.github.io/purplecoat.js/) and I need to find a way to add an overlay backdrop to the entire body when the "toggle hints" button is clicked. Right now, when the toggle hints button is clicked, it displays the labeled overlays over the identified content, but I also want a complete background overlay added to the body to help bring focus to the labeled overlays.
My 2nd issue is, my actual website is a multi-page site and I need to use this purplecoat overlay plugin on each page so users can click to see the labeled hints. My problem is when the user clicks on the Toggle Hints button to view the labeled hints on one page, it will work fine, but when they open a new page of the site and click on the same toggle hints button, it shows the labeled hints from the previous page. If I refresh the page, then it shows the correct updated hints.
I need to find a way to clear the purplecoat.js content when a new page loads, so it does not show the wrong label overlays - or somehow discretely refresh the page when someone opens a new page so it clears the purplecoat.js.
I have a jsfiddle of my login page where the purplecoat.js label overlay is working when clicking on the Toggle Hints link. I just need to add the backdrop overlay, then clear the purplecoat.js when a new page/or modal is loaded. My site has several pages and modals, and the pages and modals are all opened with a button - so if there is a way to clear the purplecoat.js cache when any button is clicked, may work. I am open to suggestions.
JSFiddle link: https://jsfiddle.net/txptbf15/
I am new to learning jQuery/js, so please be kind! :-)
HTML (of my login page):
<div id="hints"><button data-purplecoat-toggle="foo" class="btn-loginHint">Toggle Hints!</button></div>
<div id="Login" class="loginTemplate panel panel-primary">
<div class="panel-heading clearfix">
<h2 class="pull-left">Log On</h2>
<div id="LangWrapper" class="pull-right">
<button id="LangButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-purplecoat="foo" data-purplecoat-label="Select Language" data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<span id="chooseLanguage">Language</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li onclick="_.utils.ChangeLanguage('en')">(English)</li>
<li onclick="_.utils.ChangeLanguage('jp')">(日本語)</li>
</ul>
</div>
</div>
<div class="panel-body">
<p>Please enter your username and password</p>
<form class="">
<fieldset class="">
<legend>Account Info</legend>
<div class="form-group">
<label for="accountType">Account Type</label>
<select class="form-control" id="accountType" name="accountType" data-purplecoat="foo" data-purplecoat-label="Select Account from menu that you want to access." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
<option value="customer">Option 1</option>
<option value="reseller">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="email">EMail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Email" data-purplecoat="foo" data-purplecoat-label="Input email address you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<label for="email">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" data-purplecoat="foo" data-purplecoat-label="Input password you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" name="RememberMe" value="1" /> Keem me logged in
</label>
</div>
</div>
<p class="actions">
<button type="button" id="btnSubmit" class="btn btn-primary" data-purplecoat="foo" data-purplecoat-label="Select button to Login" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-sign-in"></i> Log In</button>
<i class="fa fa-puzzle-piece"></i> Forgot Password
<a id="loginRegister" href="#"
class="pull-right" data-purplecoat="foo" data-purplecoat-label="Select to Register" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-key"></i> Register</a>
</p>
</fieldset>
</form>
</div>
</div>
CSS:
.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}
.purplecoat {
padding: 0 !important;
font-size: 12px !important;
line-height: 1.2em !important;
}
.btn-loginHint {
background-color: transparent;
color: #fff;
border: none;
float: left;
padding-top: 5px;
}
Regarding Problem 1: the issue seems to be with z-index on all the purplecoat divs; it's set to 9999. As a result what you need is an overlay div with a higher z-index. See my sample below. I've also added a div with the id of overlay. Here is my working fiddle.
#overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
height:100%;
background-color:white;
z-index:10000;
}
Regarding Problem 2: I'm not sure how you're loading the pages, but this worked in my fiddle.
$('[data-purplecoat-for]').hide();
After looking at the source code it seems all those overlays have the same property data-purplecoat-for, simply calling hide on them will work. Again if this doesn't work for you I need a little more info. By the way, the github project says it's no longer being maintained.

Cannot get push menu inline with Bootstrap

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.

Button will not appear or will disappear after being clicked

I have the following part of code:
<div id="code" class="bg-primary">
<div class="code-output">rgb(0,0,0);<div class="btn btn-warning pull-right" id="reset">Reset</div></div>
</div>
The problem is that the button with id="reset" will not appear at all sometimes or will disappear after clicking it.Any ideas?Here is my css and some js:
CSS
#reset{
position: relative;
bottom: 0.56em;
left: 0.5em;
}
JS
$('#reset').click(function(){
$('.rgb').val(0);
color="rgb(0,0,0)";
$(".code-output").html(color+";");
$("#rgbaOutput").css("background","black");
});
It seems that you want to close div for your code output before you declare your button, otherwise calling html() method will erase your button.
Also notice my JavaScript Tweaks - don't use variable before you declare it - because it will go to the global object (talking about color var).
Extra advices: Try to be consistent using quotations. Try to be consistent about code indentation. Also, put a space around operators. All those small details improve readability of your code.
(I am ignoring that there's jQuery statements that don't do anything in the example code, assuming that it would do something in your full context)
$("#reset").on("click", function () {
var color = "rgb(0,0,0)";
$(".rgb").val(0);
$(".code-output").html(color + ";");
$("#rgbaOutput").css("background", "black");
});
#reset {
position: relative;
bottom: 0.56em;
left: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="code" class="bg-primary">
<div class="code-output">rgb(0,0,0);</div>
<div class="btn btn-warning pull-right" id="reset">Reset</div>
</div>
Well you say this:
$(".code-output").html(color+";");
Which will replace everything in the <div class=".code-output"> and make the rgb value appear.
Because your reset div is inside this div, it will disappear (obviously).
Just use this instead:
<div class="code-output">rgb(0,0,0);</div> <!-- use </div> tag here -->
<div class="btn btn-warning pull-right" id="reset">Reset</div> <!-- instead of here -->

Weird event binding issue on FF and Chrome - only on first click

This is on my plugin page on Git and I have two interactive demo in the web page. In one of the demo page, I have a small dialog that opens when you click on a div.
The weird issue is that this dialog is getting opened when I click on the top title that says attrchange beta . This happens only if the first click is on the title attrchange beta, clicking any other element in page fixes this issue.
The plugin page http://meetselva.github.io/attrchange/ [Fixed, use the below URL to see the problem]
http://meetselva.github.io/attrchange/index_so_issue.html
Below is the code,
<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>
<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
<h4 class="title">Attribute Changer</h4>
<p>Listed below are the attributes of the div:</p>
<div class="attrList"></div>
<div class="addAttribute text-right">add new attribute</div>
</div>
<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
<h4 class="title">Add/Modify Attribute</h4>
<p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>
<p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
<div class="clear"> </div>
<button type="button" class="float-right close">Close</button>
<button type="button" class="float-right update">Update</button>
<div class="clear"></div>
</div>
JS:
var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
$attrValue = $('.attrValue', '#addOrmodifyAttr'),
$attrAMUpdate = $('.update', '#addOrmodifyAttr');
//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
});
The problem is the CSS applied to your #attributeChanger div.
If you look at the CSS applied to it:
#attributeChanger {
background-color: #FEFFFF;
border: 1px solid #4169E1;
color: #574353;
font-size: 0.9em;
margin: 10px;
min-height: 50px;
min-width: 150px;
opacity: 0;
padding: 2px;
position: absolute;
top: -200px;
z-index: 1;
}
You'll notice that the position is absolute, and it's positioned over your logo. So what you're clicking is actually your #attributeChanger div.
To fix it, you can hide #attributeChanger using display: none;, then use $('#attributeChanger').show(); in jQuery when it comes into actual view.
The pop up is showing because this code is running:
}).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
This is because the DIV with the class addAttribute is over the title DIV.
You can either move the 'addAttribute' DIV, or remove the last line of that onclick function.
That is because you element is hover your title and detect the click on himself and open(i don't know why it open, i didnt examine your entire code). But when you click anywhere else, your code is changing his position so it is not over the title.
The easiest fix is to change you #attributeChanger CSS top to -100px (that's the value when you click on the document) OR add a display : none.
EDIT : Axel answer show what I mean by "element is hover your title".

Categories