expanding section on a HTML - javascript

There's this website http://www.phpvideotutorials.com/ I basically wanted to get some insights on how each right and left columns expands dynamically when these respective columns are clicked and contracts from expanded state when clicked again.
I'm new to web development, at least dynamic website development using jQuery and stuff.

You can check out the source code. The (simplified) operative part is here:
var dm = $('#developermonkey');
dm.bind('click', function(e) {
dm.animate({'right' : 400 });
});
So it's binding a click event to a function, which animates the element's right CSS property.

It's done with a javascript library called jQuery http://jquery.com you can read more about it there and see examples of how it works.

This can be found from view source. Please refer this code,
HTML
<div id="left">text
<a id="lefta">click</a>
</div>
JavaScript ​
$('#lefta').bind('click', function(e) {
$('#left').css({'width' : 200 });
$('#left').animate({'left' : 150 }, 400);
});
​
Here in example I am increasing width of div also so as to explain you how jQuery css function works so that you can use to set additional css style while moving your div. Please refer following fiddle.
http://jsfiddle.net/TqCmB/

Related

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

Why does jQuery work in jSfiddle but not site?

I am using jQuery to change the height of a div, I was using static values before that were set by me, but now I made one that makes the div to its full height and returns it to 24px, Now it works great in JSFiddle but not on the site.
jQuery(".dsellactiontext").toggle(function(){
jQuery(this.parentNode).animate({
height: $(this.parentNode)[0].scrollHeight+'px'
}, 400);
},function(){
jQuery(this.parentNode).animate({height:24},600);
});
The fiddle : http://jsfiddle.net/skoltyno/ZBR8G/
The site test page : http://bocaratonrealestatemarket.com/jquery-test-page/
You can see in the inspector that the height is not being toggled to full but it will toggle it to 24px.
Whats going on here?
Wordpress runs jQuery in noConflict mode, meaning that $ is not aliased to jQuery. This means your $(this.parentNode)[0].scrollHeight+'px' throws an error (which you can see in the console).
Try;
jQuery(this.parentNode)[0].scrollHeight+'px'
... or, as your creating a jQuery object of a DOM Element, then accessing the DOM Element immediately, just:
this.parentNode.scrollHeight+'px'
... should suffice.

WEIRD: jquery .show and .hide not responding or changing css of corresponding div

Sample Code of my error
So as you can see in the above example, next to where it says "Disclaimer Question111", there is an expand/contract link. The script works halfway, in that the text change occurs, but it does not change the display css for the div its anchored to.
Any idea why? I don't see any page errors.
The code that triggers this is in my site.js file but i pulled it out here so you can see:
$('.accordion-trigger-settings').click(function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Collapse Settings');
}
else
{
$(target).hide();
$(this).text('Expand Settings');
}
return false;
});
It applies to this block:
Expand View
<div class="padding5"></div>
<div class="accordionContent" id="accordion-season5160">
<textarea name="str_disclaimer_header5160" id="str_disclaimer_header5160"></textarea>
</div>
Using the Chrome web inspector I see you have two elements with id accordion-season5160. So, the text is changing because it applies to this but the show() method is modifying (showing/hiding) the first element with id accordion-season5160.
Make sure the id is unique.
See the image!
Hope it helps!
Actually you have two <div id="accordion-season5160"...> on the page. One of them is hidden (inside hidden <div class="hide_div">).
You can find them both using console:
document.querySelectorAll('#accordion-season5160')
You will see both of them. To see the element you can right click on it in the console and click 'Reveal in elements panel' (in Chrome)
The best way to solve this issue is to make ids unique. However you can try a quick way to solve the issue that does not require uniqueness of ids:
Replace
var target=$(this).attr('href');
with
var target=this.nextElementSibling.nextElementSibling;
JS Bin http://jsbin.com/itucop/1/edit

Dynamically creating jQuery Dialog box & append it to DIV . Dialog is created but not within the DIV

$('.image').draggable({
revert:'invalid',
helper:'clone',
});
$('#content').droppable({
accept:'.image',
drop:function(event , ui{
$('<div>').appendTo('#content').dialog();
}
});
Dialog gets created but not within the CONTENT div. It gets created under the body !
why it doesn't append under CONTENT ?
I believe this Blog post may help explain it better than I can
http://blog.pengoworks.com/index.cfm/2007/10/26/jQuery-Understanding-the-chain
jQuery always references the first element in the chain, unless you
use a command that explicitly changes the chain.
If anyone has a reference to the above quote on the jquery site please post it as I would also like to refresh my knowledge on that one ..
UPDATE:
Actually the above may not be your problem (left in as its still valid) it seems that Dialog itself has some issues as to where it actually gets added see here: http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
These seem to have been resolved, so it does depend on your version of jquery UI see here:
http://api.jqueryui.com/dialog/#option-appendTo
$('.image').draggable({
revert:'invalid',
helper:'clone',
});
$('#content').droppable({
accept:'.image',
drop:function(event , ui{
$('#content').dialog({ appendTo: "#content" });
}
});
The dialog()-function moves it out of the #content div. Created a small fiddle, where just a regular (non dlg) div is inserted into #content -> works. Then i inserted another div in the html (non-javascript) and made that a dialog -> moved out of #content

Jquery make div always scroll to bottom

I have a div that contains a table. This table is dynamically updated, and is filling up with data as user is using our website.
Is it possible to force this div to always be scrolled to bottom? So that the user will always be able to see the bottom most table row that was added.
Thank you!
That would be something like
...onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').attr('scrollHeight')});
};
Note, if the rows are added very often, you would want to use setTimeout with blocking variable check at the beginning to prevent scrolling down more often than twice per second or so. This technique is discussed e.g. here
UPDATE
Starting with jQuery 1.6 it is better to use .prop() instead of .attr() (see comments to this question):
onRowAdded = function() {
$('#myTable').animate({scrollTop: $('#myTable').prop('scrollHeight')});
};
Set the update element as position absolute and bottom:0
DEMO http://jsfiddle.net/Mdzmx/
Try something like it :
Create a anchor like <a id='bottomDiv'></a> and insert a javascript like this document.getElementById('bottomOfDiv').scrollIntoView(true);
I made a example here
http://jsfiddle.net/PTmpL/1/
Follow this tutorial
http://jqueryfordesigners.com/fixed-floating-elements/
but use the bottom css property to have the bottom most element, visible on the page
element{
bottom:0;
}
I'd recommend using the ScrollTo JQuery plugin. Just use
element.scrollTo('max', {axis: 'y'});
or
element.scrollTo('max', duration, {axis: 'y'});
This plugin has the added benifit of having a nice smooth scroll.
I think this could be the easy solution !!!
element.scrollTo(element.get(0).scrollHeight);

Categories

Resources