jquery push element down on button click - javascript

I am using blocksit.js to get Dynamic Grid Layout in my web-app.
It works perfect. The problem comes when I have to dynamically hide and unhide a textbox on button click, the boxes below are not shifting down so the textbox is going under the box below. See the image below.
I have tried whole day, but without luck.

If you are not creating your div dynamically then you should, in your markup, place the textbox above your buttons :)
What to do:
Let's say this is your HTML:
--BUTTON--++--BUTTON--++--BUTTON--
--------------TEXTBOX-------------
Make it like this:
--------------TEXTBOX-------------
--BUTTON--++--BUTTON--++--BUTTON--

Related

Firepad text not shown until first click

I have embedded Fire Pad on my website. Initially I had problems with textbox being hidden but based on this post, I was able to make it work.
Everything seems to be working but one part. I need to click on the text area for text to be loaded for the first time. Ie. when page loads, the text area is visible but empty. I click in that text area and the document appears.
DOM View
I can see text is available in the DOM it is just hidden until I focus on that area. I assume it is still related to my DOM structure and CSS.
I tried to fire focus and click events.. No luck. Any help is appreciated.
Try adding init(); to your
$(document).ready(function(){
}
Ok, here us what worked for me:
codeMirror.focus();
codeMirror.setCursor(codeMirror.lineCount(), 0)

How can I hide a radio button using javascript in Qualtrics

I have been using the following code to hide a radio button in a multiple choice, 3 column question in Qualtrics (so that option can be used like a sub head and cannot be selected). However the code has now stopped working with the new theme we are using.
$('QR~QID154~198').style.display='none';
The following code works to hide the radio dot, however it then right aligns all of the responses below it, so it won’t work.
$('QR~QID154~198').up().hide();
Any ideas on another way to code this in JS?
You can put the buttons in a div and show or hide the div it is easier like that. you can also use .removeClass or .addClass with the div so it can be controlled from a script that would check if the class is there it will remove it or if it's not it will add it, you can use .hasClass to check weather it is there or not.

Javascript doesn't seem to work inside the content loaded in lightbox2

I have created a comment form in a view and made it display as hidden so that I can make is appear in a lightbox using lightbox2.
The form mark up looks like this:
<div id="comment-form" class="hidden">
<div id="comment-form-inner">
........form code goes here.....
</div>
</div>
And then the link that open the lighbox looks like this:
Add a review
The the elements inside the div #comment-form-inner is displayed in the lighbox but some field doesn't seems to work such as the date picker field and the five star field. The date picker does not show up when the date text box field is active and the animated stars in the five star field just shows a select box.
Is there a way for the form fields to be able to render the javascript attached to those form elements?
First try updating lightbox to the latest jQuery version and see if that works.
Here's someone who posted a similar question already:
Jquery datepicker does not work inside lightbox
It is not loading because you have given the JavaScript functions in document.ready instead of that use on or live according to your jQuery version ,
$('.classname').on("click",function(){
// your JavaScript to run
});
Or
You can load the lightbox as iframe.

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

Toggle/Formatting with Javascript

I posted awhile ago and got great insight on hide/show text with javascript... Now I need to take this one step further. Can't find the right combination to make it work.
Here's what I NEED:
When a viewer comes to this page, the first hide/show element is displayed in the text box AND
That element is also highlighted a certain color to display that it is active.
Lastly, as every hide/show element is clicked, that stays highlighted until the next is selected.
Here's a link to my dev site. I think it's easier this way.
http://verus.exigodigital.com/services/
Here was my previous post on the hide/show text:
Showing & Hiding Text with Javascript
REALLY appreciate the help, guys! :)
You could make 2 CSS definitions, one for the currently selected textbox, and one for textboxes that aren't selected
When someone clicks on one of the textboxes to edit its contents (the onfocus event), you just call a function that runs through all of your textboxes, and for each one checks if it's the one with focus - if it is, set the className variable of the element to "selected" or something, and it it's not the one with focus then set it's className variable to "normal" or something
If I didn't understand the question or you need more info, just let me know :)

Categories

Resources