I am currently using the Calendar on a wordpess website with restricted width on the page due to widgets restricting width on the right hand side.
This is causing the events to be squashed up in the week view, can I :
Disable the Sunday day so that the other 6 days are wider
Can I make each day wider and use a scroll bar along the bottom for the week view ?
Are these two options possible ? If so how can I achieve this
Disabling Sunday is probably possible, although I haven't done it before and I can bet you it's going to require extensive php coding to achieve.
The easiest, to my mind, would be to play around with the CSS of the calendar widget. Here's my suggestions:
You could make each day (which'll be
an <li> tag) wider;
Give that widget a set width /
height; and lastly
Set the parent (either the tag, or
the containing tag) CSS to
overflow: scroll.
It won't be pretty (unless you use Javascript/jQuery), but it'll work...
Hope it helps...
Related
This is my situation, I have a css 3 column fluid layout (finally mastered the holy grail, thanks everyone!) and in my left column I have a google adsense advert. For those of you familiar with this, they aren't very flexible in the advert sizes, but I am curious if there is a way to change the advert based on the width of the column. Currently this column sits at 20%, so I am thinking maybe a good old fashioned "If - Else" statement might do the trick, but I haven't got it to work yet. The logic is that say we have two ads, a 180 px wide one (a) and a 280 px wide one (b), so if the column is greater than 280 px then it will display advert b, if not then it will display advert a. Has anyone else done this? Thanks!
There are a few considerations here. First, you tagged this question with css. If you simply want to use css to hide the ad your logic has determined should not be displayed, it's trivial to do so, but this is a terrible idea. For one, you'll be hiding a loaded ad, which Google specifically forbids. Next, you might end up hiding an ad that has loaded first, and therefore has the most "valuable" clicks on your page. You don't want to be left showing your less valuable ads.
What you need to do is use javascript at page load to determine what the viewport width is, and then choose which ad code to load in the ad slot you are talking about. Test this in as many browsers as possible, because you need to make sure you getting the correct viewport width for this strategy to work. If, for some reason, it doesn't work, make sure that the fallback doesn't collapse the layout catastrophically. The downside to this method is that if the user changes viewport size after the page load, then the ad will break boundaries. You can at least use CSS to mitigate this edge case scenario, either hiding or cropping the ad's parent div (overflow: hidden;) so that a change of viewport size doesn't break the layout.
In an ecommerce site, I would like to display number of items in a row according to browser width, but minimum will be 4 items. Just like what has been done in Amozon site, if you try to browse amozon.com, try to maximize and shrink your browser, you will find that number of items display in [More Items to Consider] section is according to your browser size. It is smart enough to know when it should fully hide or show an item, no partially visible item forever.
Anyone know what is this technology called? Any idea how this can be done? Thanks in advance.
You can do this with float elements in a div with overflow:hidden. I'll jsfiddle a proof of concept for you.
JSFiddle:
http://jsfiddle.net/WLEzw/
Make your browser window bigger and smaller and you will see more and less pears.
That is just CSS based.
An example of what you want to accomplish from a friend website redesign
shrink and wide the browser so you can see the effect
You can also use JQuery to moniter whether browser window is resized, through $(window).resize function. And you'll have to call details of the products shown either using Ajax or with iframe by reloading the page within iframe with more products.
The code to be written inside browser's resize method will be as follows.
$(window).resize(function() {
//Your code on resizing the browser.
});
How is it possible to (automatically) adjust the height of a Flex (4) application at runtime so that only the HTML-page scroll bar is shown, not any Flex scroll bar?
I'm using a ViewStack control which will change always its content. So every time some new content (NavigatorContent controls) is shown (which apparently will have different heights) i want the application height to adjust its height in a way it is reflected in changing only the height of the HTML-page.
I have the slight feeling that this means changing the height of the SWF at runtime! Is this true? If yes how to tell the page ? Is this possible?
I hope i explained my problem as close as possible.
Thanks in advance.
If you haven't already come across a solution to this here's a blog post described a solution for this : http://blog.wezside.co.za/blog/fullscreen-flash-with-browser-scrollbar/
It's a little more then you may be looking for so here's the general gist of it:
Set the embedded swf in the html height to 100%
Then on page change in flash, use an ExternalInterface call to set the height of the container div to your flash content.
Enjoy browser scrolling for your flash/flex app :P
This is the solution which worked (for me)!
I'm working on a Flex 4 application and I started customizing the interface with skins to give a whole new look.
So, I've created two scrollbar skins in Flash Catalyst (one horizontal, one vertical).
Its working great when I test the application through Catalyst so I took it and imported it on Flash Builder, copied the components and defined the new skins in my css file for the HScrollbar and VScrollbar.
The skin is working, all the buttons are ok. But, the scrollbar isnt resizing for some reason. It remains in the same height I've designed it to be regardless of the content it is bound to.
It scrolls the content in all the ways it should be but it doesnt resize and the thumb isnt getting all the way down.
Also I've noticed the following.
I have a custom component acting as a list. It extends Group and contains a Scroller. So at one place of the application the Scrollthumb is getting lower than on another place where the same custom list is used.
I also have to mention that this scroller works perfectly without a custom skin.
Anyone else having similar problems?
Okay, I know you posted this a while ago but I have been scouring the internet for days looking for why the scrollbar's thumb wasn't scaling like the default scrollbar.
There are a couple things to check, first is there a set height on your thumb's skin?
If not, and this is what I was overlooking, go to your scroller skin and at the point where you add the vertical and horizontal scrollbar set the "fixedThumbSize" property to false.
I suppose that your graphic elements are defined as every single part of the scrollbar (top arrow, bottom arrow, track, etc...): in this case you should check that the elements dimensions are not fixed... they should be in % to be able to change the dimensions based on the container.
I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?