PDA

View Full Version : Ajax Side Panel script



Wakel
01-03-2013, 05:10 PM
Hello and Happy New Year to all.

I'm away to use the Ajax Side Panel script (http://www.dynamicdrive.com/dynamicindex17/ajaxsidepanel.htm) for my website.

First thing is I'm needing script to open from left to right and NOT right to left.

Second thing script works great in all browsers apart from Opera (v9), script works and opens file in side panel window, but when I close panel it looks closed but its not as I cant click any link on main page and the panel shadow is still there. Looks like not closing correctly. Any help!

Third thing, I'm going to use script for an external pdf link (http://www.notmysite.com/afile.pdf)
and asking whats best way i.e. rel="ajaxpanel" data-loadtype="iframe" or just rel="ajaxpanel" ????

Any help would be great

Wakel
01-03-2013, 05:32 PM
Sorry I forgot to add.

I've tried pdf file, text file and www address and in Opera 9
The text file and www address both open and close correctly, so issue may lay with the pdf file!!!

Beverleyh
01-03-2013, 06:57 PM
I dont have an answer for point 1 but here are some thoughts on points 2 and 3.

I would say that its an old issue with Opera 9 but its likely to have been fixed now as we're into Opera 12.

Opera 9 is an old version of the browser so its probably not something that you need to worry too much about as most users are more up-to-date. See browser stats - O9 fell off the radar a few years ago: http://www.w3schools.com/browsers/browsers_opera.asp

To answer your third point, you'd just use rel="ajaxpanel" in the link <a> tag. Because you're targetting an external file you're limited to using Iframes instead of Ajax, but it looks like the script will skip into Iframes mode automatically.

Beverleyh
01-03-2013, 07:34 PM
I'm stuck on iPhone at the mo so I can't test anything at this side, but I had a quick look at the js and CSS files on the demo page just now...

You might be able to switch the panel to the opposite side of the screen if you change all instances of "left" to "right" inside of both files (js and CSS).

Just throwing some ideas about for you to play with while I'm unable to get to a computer. Hope its something you can pick your way through or maybe somebody else can step in and help in the meantime.

vwphillips
01-04-2013, 12:12 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="ddajaxsidepanel.css" />
<style type="text/css">
/*<![CDATA[*/
.ddajaxsidepanel{ /* Main Panel Container */
position: fixed; /* keep this value as is */
top: 0; /* keep this value as is */
visibility: hidden; /* keep this value as is */
background: lightyellow;
border-color: white;
border-left: 1px ridge #eee;
-moz-box-shadow: -10px 0 10px rgba(137,137,137, 0.8); /* CSS 3 box shadow */
-webkit-box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
-webkit-box-sizing: border-box; /* Set .ddajaxsidepanel width so that any padding or borders are added inside this width, not in addition to */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.ddajaxsidepanel .panelhandle{ /* CSS for Panel Handle DIV */
width: 24px;
height: 100%;
position: absolute;
left: 95%;
top: 0;
cursor: pointer;
background: transparent url(http://www.dynamicdrive.com/dynamicindex17/handle.gif) right no-repeat; /* path to "handle" gif */
}

.ddajaxsidepanel .contentarea{ /* CSS for main content area DIV */
height: 100%;
padding: 10px;
overflow: scroll;
}
/*]]>*/
</style>
<script >

/* Ajax Side Panel script (v1.0)
* Created: May 1st, 2012. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

var ddajaxsidepanel = {
defaults: {ajaxloadgif:'squareloading.gif', fx:{dur:'normal', easing:'swing'}, openamount:'80%', openamount_minthreshold:'400px'},

$panelref: null,
$contentarea: null,
setting: null,
docdimensions: null,
paneldimensions: null,
$ajaxloadgif: null,
delaytimer: null,

loadcontent: function(url, type){
var $ = jQuery
if (url == null){
this.$contentarea.empty()
this.$panelref.data('state', 'closed')
}
else{
this.$panelref.data('state', 'open')
this.$contentarea.html(this.$ajaxloadgif)
if (type){
loadtype = type
}
else if (url.indexOf('http') != -1){
var url_rootdomain = url.match(/^http[^:]*:\/\/((?:www\.){0,1}([^\/]+))/i) // match domain name portion of http link
if (url_rootdomain && location.hostname.indexOf(RegExp.$2)!=-1){ //if URL's root domain (without www) matches current doc's hostname, meaning it's a internal URL (ie: http://mysite.com/page1.htm)
document.write = document.writeLn = function(){} // overwrite default document.write() function, as it causes major problems if present inside Ajax fetched document
url = url.replace(RegExp.$1, location.hostname)
loadtype = "ajax"
}
else{
loadtype = "iframe"
}
}
else{
loadtype = "ajax"
}
if (loadtype == "iframe"){
ddajaxsidepanel.$contentarea.html('<iframe src="javascript:false" style="border:0; margin:0; padding:0; width:100%; height:100%"></iframe>')
ddajaxsidepanel.$contentarea.find('iframe:eq(0)').attr('src', url)
}
else{
ddajaxsidepanel.$contentarea.load(url)
}
}
},

showhidepanel:function(url, action, type){
var $ = jQuery, setting = this.setting
var panelstate = this.$panelref.data('state')
var winwidth = $(window).width(), panelwidth = this.$panelref.outerWidth()
if (panelwidth < parseInt(setting.openamount_minthreshold))
return true
if (setting.openamount_maxwidth && setting.openamount_maxwidth > setting.openamount_minthreshold)
panelwidth = Math.min(panelwidth, parseInt(setting.openamount_maxwidth))
if (action =="show" && panelstate == "open")
this.$panelref.animate({left: '+=50'}, function(){
ddajaxsidepanel.loadcontent(null)
})
var finalcss = (action=="show")? {left: winwidth-panelwidth, opacity: 1} : {left: -winwidth, opacity: 0}
if (setting.slide=='right'){
finalcss = (action=="show")? {left: 0, opacity: 1} : {left: this.$panelref.get(0).offsetWidth, opacity: 0}
this.$panelref.get(0).style.left=-this.$panelref.get(0).offsetWidth+'px';
}
this.$panelref.animate(finalcss, setting.fx.dur, (this.$panelref.data('state')=='open')?setting.slide=='right'?'easeOutBack2':'easeOutBack' : setting.fx.easing, function(){
ddajaxsidepanel.loadcontent(url, type)
})
return false
},



init: function(setting){
var $ = jQuery
this.setting = $.extend({}, this.defaults, setting)
if (setting.targetselector){
var $targetlinks = $(setting.targetselector).each(function(){ // seek out targeted selectors on the page
var $el = $(this)
$el.on('click', function(){
return ddajaxsidepanel.showhidepanel(this.href, "show", this.getAttribute('data-loadtype'))
})
})
}
if (this.$panelref){ // if ajax content panel already defined, just exit
return
}
this.$ajaxloadgif = $('<table width="100%" height="100%" align="center" valign="center" style="text-align:center"><tr><td><img src="' + this.setting.ajaxloadgif + '"/></td></tr></table>')
this.$panelref = $('<div class="ddajaxsidepanel"><div class="panelhandle"></div><div class="contentarea"></div></div>').appendTo(document.body)
this.$panelref
.css({width:this.setting.openamount, height:'100%', left:'100%', visibility:'visible', opacity:0})
.data('state', 'closed')
this.$contentarea = this.$panelref.find('div.contentarea:eq(0)')
.click(function(e){
e.stopPropagation()
})
this.$panelref.find('div.panelhandle:eq(0)')
.attr('title', 'Close Content Panel')
.on('click', function(){
ddajaxsidepanel.showhidepanel(null, "hide")
})
$(document).on('click', function(e){
if (e.which == 1) // if left click on mouse
ddajaxsidepanel.showhidepanel(null, "hide")
})
this.paneldimensions = {w: this.$panelref.outerWidth(), h: this.$panelref.outerHeight()}
}

}

jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return (c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b);
},
easeOutBack2:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return (c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b)*-1;
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
})


// Initialize Ajax Side Panel script:

jQuery(function(){
ddajaxsidepanel.init({
targetselector: 'a[rel="ajaxpanel"]',
ajaxloadgif: 'squareloading.gif', //full path to "loading" gif relative to document. When in doubt use absolute URL to image.
fx: {dur:500, easing: 'easeInQuad'}, // dur: duration of slide effect (milliseconds), easing: 'ease_in_type_string'
openamount:'80%', // Width of panel when fully opened (Percentage value relative to page, or pixel value
openamount_minthreshold:'400px', //Minimum required width of panel (when fully opened) before panel is shown. This prevents panel from being shown on small screens or devices.
slide:'right'
})
});
</script></head>

<body>
<ul>
<li><a href="http://www.dynamicdrive.com" rel="ajaxpanel">Dynamic Drive</a> (external link, auto loads in IFRAME)</li>
<li><a href="http://www.cssdrive.com" rel="ajaxpanel">CSS Drive</a> (external link, auto loads in IFRAME)</li>
<li><a href="index.html" rel="ajaxpanel">My Home Page</a> (internal link, auto loads using Ajax)</li>
<li><a href="http://www.mysite.com/index.html" rel="ajaxpanel">My Home Page</a> (still internal link, assuming mysite.com is your site's domain, auto loads using Ajax)</li>
<li><a href="http://www.mysite.com/index.html" rel="ajaxpanel" data-loadtype="iframe">My Home Page</a> (internal link, but explicitly load in iframe due to data attribute)</li>
</ul>
</body>

</html>

Beverleyh
01-04-2013, 12:14 AM
Thanks for the update Vic! :)

Wakel
01-04-2013, 01:26 AM
Thank you both, thats great all working :cool:

amkarow
05-14-2013, 05:26 PM
Thank you for the fix, Vic. I have an additional question. After making the changes noted, the panel slides in from the left, as desired, however it floats all the way to the right side of the screen. I have changed the panel width to 40% of the screen and am trying to float the panel to the right. I have looked an cannot figure out how to change the panel alignment. Can you help?

Thanks!

vwphillips
05-15-2013, 11:20 AM
I have retested this code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="ddajaxsidepanel.css" />
<style type="text/css">
/*<![CDATA[*/
.ddajaxsidepanel{ /* Main Panel Container */
position: fixed; /* keep this value as is */
top: 0; /* keep this value as is */
visibility: hidden; /* keep this value as is */
background: lightyellow;
border-color: white;
border-left: 1px ridge #eee;
-moz-box-shadow: -10px 0 10px rgba(137,137,137, 0.8); /* CSS 3 box shadow */
-webkit-box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
box-shadow: -10px 0 10px rgba(137,137,137, 0.8);
-webkit-box-sizing: border-box; /* Set .ddajaxsidepanel width so that any padding or borders are added inside this width, not in addition to */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.ddajaxsidepanel .panelhandle{ /* CSS for Panel Handle DIV */
width: 24px;
height: 100%;
position: absolute;
left: 95%;
top: 0;
cursor: pointer;
background: transparent url(http://www.dynamicdrive.com/dynamicindex17/handle.gif) right no-repeat; /* path to "handle" gif */
}

.ddajaxsidepanel .contentarea{ /* CSS for main content area DIV */
height: 100%;
padding: 10px;
overflow: scroll;
}
/*]]>*/
</style><script>

/* Ajax Side Panel script (v1.0)
* Created: May 1st, 2012. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

var ddajaxsidepanel = {
defaults: {ajaxloadgif:'squareloading.gif', fx:{dur:'normal', easing:'swing'}, openamount:'80%', openamount_minthreshold:'400px'},

$panelref: null,
$contentarea: null,
setting: null,
docdimensions: null,
paneldimensions: null,
$ajaxloadgif: null,
delaytimer: null,

loadcontent: function(url, type){
var $ = jQuery
if (url == null){
this.$contentarea.empty()
this.$panelref.data('state', 'closed')
}
else{
this.$panelref.data('state', 'open')
this.$contentarea.html(this.$ajaxloadgif)
if (type){
loadtype = type
}
else if (url.indexOf('http') != -1){
var url_rootdomain = url.match(/^http[^:]*:\/\/((?:www\.){0,1}([^\/]+))/i) // match domain name portion of http link
if (url_rootdomain && location.hostname.indexOf(RegExp.$2)!=-1){ //if URL's root domain (without www) matches current doc's hostname, meaning it's a internal URL (ie: http://mysite.com/page1.htm)
document.write = document.writeLn = function(){} // overwrite default document.write() function, as it causes major problems if present inside Ajax fetched document
url = url.replace(RegExp.$1, location.hostname)
loadtype = "ajax"
}
else{
loadtype = "iframe"
}
}
else{
loadtype = "ajax"
}
if (loadtype == "iframe"){
ddajaxsidepanel.$contentarea.html('<iframe src="javascript:false" style="border:0; margin:0; padding:0; width:100%; height:100%"></iframe>')
ddajaxsidepanel.$contentarea.find('iframe:eq(0)').attr('src', url)
}
else{
ddajaxsidepanel.$contentarea.load(url)
}
}
},

showhidepanel:function(url, action, type){
var $ = jQuery, setting = this.setting
var panelstate = this.$panelref.data('state')
var winwidth = $(window).width(), panelwidth = this.$panelref.outerWidth()
if (panelwidth < parseInt(setting.openamount_minthreshold))
return true
if (setting.openamount_maxwidth && setting.openamount_maxwidth > setting.openamount_minthreshold)
panelwidth = Math.min(panelwidth, parseInt(setting.openamount_maxwidth))
if (action =="show" && panelstate == "open")
this.$panelref.animate({left: '+=50'}, function(){
ddajaxsidepanel.loadcontent(null)
})
var finalcss = (action=="show")? {left: winwidth-panelwidth, opacity: 1} : {left: -winwidth, opacity: 0}
if (setting.slide=='right'){
finalcss = (action=="show")? {left: 0, opacity: 1} : {left: this.$panelref.get(0).offsetWidth, opacity: 0}
this.$panelref.get(0).style.left=-this.$panelref.get(0).offsetWidth+'px';
}
this.$panelref.animate(finalcss, setting.fx.dur, (this.$panelref.data('state')=='open')?setting.slide=='right'?'easeOutBack2':'easeOutBack' : setting.fx.easing, function(){
ddajaxsidepanel.loadcontent(url, type)
})
return false
},





init: function(setting){
var $ = jQuery
this.setting = $.extend({}, this.defaults, setting)
if (setting.targetselector){
var $targetlinks = $(setting.targetselector).each(function(){ // seek out targeted selectors on the page
var $el = $(this)
$el.on('click', function(){
return ddajaxsidepanel.showhidepanel(this.href, "show", this.getAttribute('data-loadtype'))
})
})
}
if (this.$panelref){ // if ajax content panel already defined, just exit
return
}
this.$ajaxloadgif = $('<table width="100%" height="100%" align="center" valign="center" style="text-align:center"><tr><td><img src="' + this.setting.ajaxloadgif + '"/></td></tr></table>')
this.$panelref = $('<div class="ddajaxsidepanel"><div class="panelhandle"></div><div class="contentarea"></div></div>').appendTo(document.body)
this.$panelref
.css({width:this.setting.openamount, height:'100%', left:'100%', visibility:'visible', opacity:0})
.data('state', 'closed')
this.$contentarea = this.$panelref.find('div.contentarea:eq(0)')
.click(function(e){
e.stopPropagation()
})
this.$panelref.find('div.panelhandle:eq(0)')
.attr('title', 'Close Content Panel')
.on('click', function(){
ddajaxsidepanel.showhidepanel(null, "hide")
})
$(document).on('click', function(e){
if (e.which == 1) // if left click on mouse
ddajaxsidepanel.showhidepanel(null, "hide")
})
this.paneldimensions = {w: this.$panelref.outerWidth(), h: this.$panelref.outerHeight()}
}

}

jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeOutBack2:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return (c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b)*-1;
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
})


// Initialize Ajax Side Panel script:

jQuery(function(){
ddajaxsidepanel.init({
targetselector: 'a[rel="ajaxpanel"]',
ajaxloadgif: 'squareloading.gif', //full path to "loading" gif relative to document. When in doubt use absolute URL to image.
fx: {dur:500, easing: 'easeInQuad'}, // dur: duration of slide effect (milliseconds), easing: 'ease_in_type_string'
openamount:'40%', // Width of panel when fully opened (Percentage value relative to page, or pixel value
openamount_minthreshold:'400px', //Minimum required width of panel (when fully opened) before panel is shown. This prevents panel from being shown on small screens or devices.
slide:'right'
})
});

</script></head>

<body>
<ul>
<li><a href="http://www.dynamicdrive.com" rel="ajaxpanel">Dynamic Drive</a> (external link, auto loads in IFRAME)</li>
<li><a href="http://www.cssdrive.com" rel="ajaxpanel">CSS Drive</a> (external link, auto loads in IFRAME)</li>
<li><a href="index.html" rel="ajaxpanel">My Home Page</a> (internal link, auto loads using Ajax)</li>
<li><a href="http://www.mysite.com/index.html" rel="ajaxpanel">My Home Page</a> (still internal link, assuming mysite.com is your site's domain, auto loads using Ajax)</li>
<li><a href="http://www.mysite.com/index.html" rel="ajaxpanel" data-loadtype="iframe">My Home Page</a> (internal link, but explicitly load in iframe due to data attribute)</li>
</ul>
</body>

</html>

compare with your code or post a link to your page

srbo
07-07-2013, 02:01 AM
Is it possible to open the ajaxsidepanel manually via javascript?
If 'yes' how? I tried

... <body><script>jQuery(ddajaxsidepanel.showhidepanel("http://www.cssdrive.com","show"));</script></body> ...
without success. Where is my fault?

jscheuer1
07-07-2013, 04:57 AM
.

In the future, please post new questions in a new thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post (http://www.dynamicdrive.com/forums/showpost.php?p=7) for more information.

Just:


ddajaxsidepanel.showhidepanel("http://www.cssdrive.com","show");

is enough as long as the panel script has loaded and initialized, which it might not have. Assuming you have the scripts and css in the head of your page (Step 1 on the demo page), it still takes until jQuery's document ready before the script initializes. So you can try (this is document ready, different than what you have in your post, and waits until after other document ready code in the head, in this case hopefully the main script's initialization):


jQuery(function(){ddajaxsidepanel.showhidepanel("http://www.cssdrive.com","show");});

If that's not long enough to wait, then (onload of the window):


jQuery(window).load(function(){ddajaxsidepanel.showhidepanel("http://www.cssdrive.com","show");});

Whichever you do, the browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

srbo
07-07-2013, 10:07 AM
In the future, please post new questions in a new thread, and:
Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

Sorry, the thread is named "Ajax Side Panel script". I thought thats a good idea to post into this, better than to open a new one. Sorry again.

But ...
I tried this
jQuery(window).load(function(){ddajaxsidepanel.showhidepanel("http://www.cssdrive.com","show");});
and it works perfectly.

Thanks a lot.