Justin,
I'm curious if you would be willing to share your cleaned up version of the sliding panel that you're using on this site. I've implemented the tutorial as seen here: http://web-kreation.com/index.php/wordpress/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/ on a site I'm getting ready to launch. It works in modern browsers pretty well but creates a hot mess in IE6, and yours works great.
I can manipulate the PHP and the CSS but the JS is beyond me.
Just thought I'd ask!
You must be a logged-in exclusive member to view this reply.
I tried this site in IE6 it seemed to be ok. Whether intentional or accidental ;-)
I don't want you to have to go too much out of your way but if you are willing I'd be very appreciative.
You must be a logged-in exclusive member to view this reply.
You must be a logged-in exclusive member to view this reply.
That would be terrific I'd be happy to help test!
Sounds like a great name ;-)
You must be a logged-in exclusive member to view this reply.
I'll be excited to test it!
You must be a logged-in exclusive member to view this reply.
That's awesome.. its worked from me..
I just tried with Hybrid 0.6 & Thematic 0.9.5 and wordpres 2.8
Thanks for sharing..
Thats cool ;)
Worked like a charm for me with 0.6 and 2.8. That is really really slick. Thanks
Works.
I really do like things done like this. A new design pattern optionally available and supported by the framework. INMO this is the way to extend theme functionality.
This worked perfectly. I only fiddled with the css and added a <noscript> line, with a link to a static page that contains the information that's within my slider.
The added benefit of the noscript line was that it made the content hidden in the slider accessible on my BlackBerry.
The site I'm planning to use this on is not launched just yet but if anyone is interested in seeing the results... http://wpmama.com
Thanks, Justin for all your great work!
Oh, man, that is cool. I installed it on a test site and it works slick. Thanks!
You must be a logged-in exclusive member to view this reply.
@DaisyOlsen ~ Your site is looking good! I like your style and I'll check back!
Marvelous!
With a top page menu ala Hybrid News, there's a conflict that doesn't allow the menu items to be selected. If you want to review, it's active on my beta site for which Justin has link and creds.
You must be a logged-in exclusive member to view this reply.
It could work perhaps with a bit js trickery to change the z-index value when the panel is in the open and closed state. Or perhaps with css by shrinking the .tab and .toggle div boxes. Of course, the page navi would have to be moved left along with the search box. The panel does not interfere with the search widget in the header.
You must be a logged-in exclusive member to view this reply.
@JustinTadlock
Works for me. Not the cleanest implementation... yet. I moved the page navi left and added a few lines to the javascript file panel.js to change the z-index values of the various divs. Ideally, I'd like the script to change the z-index values for the .close action after the panel is closed. This is my first attempt at JavaScript and am totally unencumbered by knowledge in that regard. Ideas?
Here my "code" (and no I'm not related to Charles Manson).
var $j = jQuery.noConflict();
$j(document).ready(
function() {
$j ( '#sliding-panel .open' ).click(
function() {
$j ( '#sliding-panel .panel' ).slideDown( 'slow' );
$j ( '#sliding-panel .tab' ).addClass( 'current' );
document.getElementById('sliding-panel-container').style.zIndex = 9999999;
document.getElementById('sliding-panel').style.zIndex = 9999999;
document.getElementById('navigation').style.zIndex = 999;
document.getElementById('page-nav').style.zIndex = 999;
}
);
$j ( '#sliding-panel .close' ).click(
function() {
$j ( '#sliding-panel .panel' ).slideUp( 'slow' );
$j ( '#sliding-panel .tab' ).removeClass( 'current' );
document.getElementById('sliding-panel-container').style.zIndex = 999;
document.getElementById('sliding-panel').style.zIndex = 999;
}
);
$j ( '#sliding-panel .toggle a' ).click(
function () {
$j ( '#sliding-panel .toggle a' ).toggle();
}
);
}
);You must be a logged-in exclusive member to view this reply.
You must be a logged-in exclusive member to view this reply.
Here's the next rendition of the panel.js modified to conform to JQuery. It's still Mansionian. Certainly someone with a modicum of JS/JQ experience could figure out how to clean it up.
@JustinTadlock this isn't specific to Hybrid News in the sense that no theme CSS needs to be modified in order for the plugin to work properly. These mods should open the plugin up to many more WP themes because it mitigates the issue of not being able to click on active elements within 35px of the top. That said, users may have to move active elements left in the event the Open/Close tab overlaps them.
Here's the .js code:
var $j = jQuery.noConflict();
$j(document).ready(
function() {
$j ( '#sliding-panel .open' ).click(
function() {
$j ( '#sliding-panel .panel' ).slideDown( 'slow' );
$j ( '#sliding-panel .tab' ).removeClass( 'closed' );
$j ( '#sliding-panel' ).addClass( 'open' );
$j ( '#sliding-panel .tab' ).addClass( 'current' );
}
);
$j ( '#sliding-panel .close' ).click(
function() {
$j ( '#sliding-panel .panel' ).slideUp( 'slow' );
$j ( '#sliding-panel' ).addClass( 'closed' );
$j ( '#sliding-panel' ).removeClass( 'open' );
$j ( '#sliding-panel .tab' ).removeClass( 'current' );
}
);
$j ( '#sliding-panel .toggle a' ).click(
function () {
$j ( '#sliding-panel .toggle a' ).toggle();
}
);
}
);panel.css needs to be modified as follows:
1) Remove z-index from the following elements:
#sliding-panel-container;
#sliding-panel; and
#sliding-panel .tab .
2) Add the following class element:
.open { z-index: 99999; }
3) Add z-index: 0; to #sliding-panel .tab .toggle
You must be a logged-in exclusive member to view this reply.
Justin, Great work again. I'm constantly amazed at what you are able to put out. Thanks.
@JustinTadlock: Let me know if you find and problems. I'm continuing to work on the CSS and JS to integrate it into my theme and making changes as I go along. When you are ready to prepare your next release, let me know and we'll go over it to determine if there are other code snippets you'd like to include.
You must be a logged-in exclusive member to view this reply.
You must log in to post.