Set content slider to be stay closed on page load and positioning WordPress
- SOLVED
Here's what I'm working on, using Theme Forest's DK theme.
http://www.gaveadesigns.com/test/
I would like to....
1. Have the page_content_wrapper div be closed on page load (rather than opening right away)
2. Have that div stay at the bottom of the page. Right now it's using a top margin (set to 20px), but I want that div to stay connected to the bottom of the page. The page resizes, so I can't just push the top margin down the page.
The theme is using a number of js files, but I believe that these would both be controlled by this one
http://www.gaveadesigns.com/test/wp-content/themes/dk/js/custom.js
Answers (5)
Manoj Raj answers:
For the first Question,
Search for this line in custom.js
$j('#page_maximize').trigger('click');
Replace the above thing with
$j('#page_minimize').trigger('click');
Manoj Raj comments:
The following may help you achieve what you want for the second thing..
Find the code <strong>starting </strong>with
$j('#page_maximize').click(function(){
Replace it with the following
$j('#page_maximize').click(function(){
var calScreenHeight = $j(window).height()-315;
$j(this).css('display', 'none');
$j('#page_minimize').css('display', 'block');
$j('#page_content_wrapper').animate({ top: calScreenHeight+'px' }, 400, function(){
$j('#page_content_wrapper').css('position', 'fixed');
});
});
Manoj Raj comments:
The above thing worked. Just now checked it in my PC. Have a try..
tydende comments:
Thank you Manoj Raj,
I had just finished applying another solution for the 2nd issue before seeing this. Thanks for your help and your solution to the 1st problem!
Hai Bui answers:
Hi,
You can fix the 2nd problem by changing:
$j('#page_content_wrapper').animate({ 'bottom': '0px' }, 400, function(){
$j('#page_content_wrapper').css('position', 'static');
});
to
$j('#page_content_wrapper').animate({ 'bottom': '0px' }, 400);
tydende comments:
Hai Bui,
I changed the code as you suggested and changed the '0px' to '300px'
the height of the div, but it doesn't open up on expand.
the whole code is now
$j('#page_maximize').click(function(){
var calScreenHeight = $j(window).height()-120;
$j(this).css('display', 'none');
$j('#page_minimize').css('display', 'block');
$j('#page_content_wrapper').animate({ 'bottom': '300px' }, 400);
});
Correct?
Thank you
Hai Bui comments:
I'm sorry it doesn't work. Please change the whole block:
$j('#page_maximize').click(function(){
var calScreenHeight = $j(window).height()-120;
$j(this).css('display', 'none');
$j('#page_minimize').css('display', 'block');
$j('#page_content_wrapper').animate({ 'bottom': '0px' }, 400, function(){
$j('#page_content_wrapper').css('position', 'static');
});
});
to
$j('#page_maximize').click(function(){
var calScreenHeight = $j(window).height()-358;
$j(this).css('display', 'none');
$j('#page_minimize').css('display', 'block');
$j('#page_content_wrapper').animate({ top: calScreenHeight+'px' }, 400);
});
358 = height of the div(300) + padding bottom (30) + top margin (20) + height of the progress div (8)
tydende comments:
Thank you Hai Bui!
That solved it. Thank you everyone for your help. Maybe I should have posted this as 2 questions, since Manoj Raj and Hai Bui both helped solve it?
This is a great site for answers!
Hai Bui comments:
Glad to be of help. You don't need to post another question, you can choose to divide the prize to more than one person.
For more information, please check http://codewi.se/2011/04/22/voting-assign-prize-money/
designchemical answers:
line 502 of custom.js - remove the following line to hide the wrapper on page load:
$j('#page_content_wrapper').fadeIn();
To fix it to the bottom of the page change line 520 of custom.js
FROM
$j('#page_content_wrapper').animate({ 'top': '80px' }, 400, function(){
$j('#page_content_wrapper').css('position', 'static');
});
TO:
$j('#page_content_wrapper').animate({ 'bottom': '80px' }, 400, function(){
$j('#page_content_wrapper').css('position', 'static');
});
Change the "80px" to whatever value required to position from bottom
tydende comments:
Manoj Raj's suggestion worked for the div staying closed on page load.
I added DesignChemical's suggestion to fix the div to the bottom of the page, and set the bottom to 0 as such
$j('#page_content_wrapper').animate({ 'bottom': '0px' }, 400, function(){
$j('#page_content_wrapper').css('position', 'static');
});
but it is still floating up. Did I do this correctly?
Thanks!
Kannan C answers:
if you want the div#page_content_wrapper at bottom on page load, you need to change this
var calScreenHeight = $j(window).height()-108;
$j('#page_content_wrapper').css('top', calScreenHeight+'px');
to
//var calScreenHeight = $j(window).height()-108;
$j('#page_content_wrapper').css('bottom', '0px');
Christianto answers:
If you what you mean is the element stay at the bottom when the page browser resize. then you need to add other function to adjust its position when browser resize (re-calculate 'top' position).
try add this on custom.js
$j(window).resize(function() {
var calScreenHeight = $j(window).height()-120;
if($j('#page_content_wrapper').css('position') == 'static') return;
$j('#page_content_wrapper').css('top', calScreenHeight);
});
sorry I update above code
Christianto comments:
Note:you should add above code on right place, to be sure that is after #page_maximize click event bind on line 515 :-)
$j('#page_maximize').click(function(){
var calScreenHeight = $j(window).height()-120;
$j(this).css('display', 'none');
$j('#page_minimize').css('display', 'block');
$j('#page_content_wrapper').animate({ 'bottom': '300px' }, 400);
});