You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 27-03-2014 20:14:09

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Resizing sidebar possibility

Is it be possibilte (with small amount of work) to make sidebar tiles resizable with changing of size of screen so it would work like in case of tiles on main site?
If yes, what changes should be done in resize() function? I'm not asking about full code. I know that it would require some work to do it. I'm asking ideologically - which parts of code should be copied and which changed.

Thank you for help.

Offline

#2 27-03-2014 20:24:55

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Resizing sidebar possibility

Do you mean rearranging or just change the width? And if you mean rearrange, how many columns will it have initially?

Rearranging from width 2 to width 1 should be easy. Making tiles smaller too. tongue

Offline

#3 27-03-2014 20:41:21

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Resizing sidebar possibility

I'd like to make tiles smaller only. I'm not interested in rearranging.

On my website I have a problem with sidebars when screen is too small - sidebar moves below semitransparent bg. I'd like it to be smaller insted OR disappear and user can make it appear after clicking on some button. But first things first - resizing of tiles in sidebar smile.

Offline

#4 27-03-2014 21:20:27

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Resizing sidebar possibility

Some code. Didn't test it and didn't even check syntax errors.

resizeSidebarTiles = function(){
	$sidebar = $("#content .sidebar"); /* store sidebar reference here */
    if($("#content").width()<400){ /*Treshhold for resizing */
       if(!$sidebar.hasClass("resizeReady")){ /* check for class to know that data arguments has been set */
           $sidebar.children(".tile").each(function(){ /* loop trough all  tiles */
               $(this).data("width",$(this).width())); /* set width as data argument */
           });
           $("#content .sidebar").addClass("resizeReady"); /* add ready class */
       }
       if(!$sidebar.hassClass("small")){
       		$sidebar.removeClass("normal").addClass("small");
       		$sidebar.children(".tile").each(function(){
       			$(this).width(scale); /* change width of each tile to value scale  */
       		});
       }
    }else{ /* content is wider than 400px */
    	 if(!$sidebar.hassClass("normal")){ /* if it is small now */
       		$sidebar.removeClass("small").addClass("normal");
       		$sidebar.children(".tile").each(function(){ /* loop trough all tiles*/
       			$(this).width($(this).data("width")); /* restore width */
       		});
       }
    }
}

$.plugin("...",{ /* insert on window resize event here (check tutorial) */
	resizeSidebarTiles:function(){
		resizeSidebarTiles();
	}
})
$.plugin("...",{ /* insert on sidebar show event */
	resizeSidebarTiles:function(){
		resizeSidebarTiles();
	}
})

Insert the events by yourself, I don't know the exact names. tongue

Offline

#5 28-03-2014 10:47:34

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Resizing sidebar possibility

Great. With small changes (miswriting) it works! Did you do it off-hand? Wow!
I also added small adjustment to the code which is changing font-size with scale changing.
Here is code:

resizeSidebarTiles = function(name){
	if(name===undefined)name=".sidebar";
	$sidebar = $("#content "+name); /* store sidebar reference here */
    if($("#content").width()<400){ /*Treshhold for resizing */
       if(!$sidebar.hasClass("resizeReady")){ /* check for class to know that data arguments has been set */
           $sidebar.children(".tile").each(function(){ /* loop trough all  tiles */
               $(this).data("width",$(this).width()); /* set width as data argument */
			   $(this).data("font-size",$(html).css('font-size')); /* set width as data argument */
           });
           $("#content "+name).addClass("resizeReady"); /* add ready class */
       }
       if(!$sidebar.hasClass("small")){
       		$sidebar.removeClass("normal").addClass("small");
       		$sidebar.children(".tile").each(function(){
       			$(this).width(scale); /* change width of each tile to value scale  */
				$(this).css('font-size',css(html,'font-size')*scale);
       		});
       }
    }else{ /* content is wider than 400px */
    	 if(!$sidebar.hasClass("normal")){ /* if it is small now */
       		$sidebar.removeClass("small").addClass("normal");
       		$sidebar.children(".tile").each(function(){ /* loop trough all tiles*/
       			$(this).width($(this).data("width")); /* restore width */
			$(this).css('font-size',($(this).data("font-size"))); /* restore width */
       		});
       }
    }
}

$.plugin($windowResizeBegin,{ /* insert on window resize event here (check tutorial) */
	resizeSidebarTiles:function(){
		resizeSidebarTiles();
	}
})
$.plugin($sidebarShow,{ /* insert on sidebar show event */
	resizeSidebarTiles:function(){
		resizeSidebarTiles();
	}
})

At least it works for me (with and without font-size changing). But when font-size chaning is turned on it is possible to zoom-in to "infinite" and because of that main content moves down when tiles are too big now (in previous version sidebar went down and content stayed in it's place). What is more in FF Web-developer it can be seen in responsive view that in 320x480 resolution page content disappear when font-size chainging is turned on!

So next and the last question in this topic. How to make sidebar disappear when zoom is too big and button to its opening/appearging appears?

Offline

#6 28-03-2014 12:08:00

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Resizing sidebar possibility

When zooming, document width and height changes, so you can use that to determine if it should dissapear.

You can use again

if($("#content").width()<400){ /*Treshhold for resizing */

but now a smaller value.

and $sidebar.hide() and show() to hide show it. Add a button somewhere. ($sidebar.append("button code in html"))
and add an event to that button ( $(document).on("click",".showSidebarButton",function(){}) that toggles the sidebar show.

Offline

Board footer

Powered by FluxBB