Well here's the problem:
I have a PHP index page which uses show/hide layers javascript. I am using the on menu.click function to show and hide content relevant to each menu. On.click all divs are hidden except the content for that menu item , which fades in. The content relating to each menu item are displayed within separate DIVS. The property is applied to all the text within all the divs.
See: http://jobe-group.com/jobeco/uk/2010live/dynamic/content/index.php#
The trouble is that SIFR only appears to be applied to the displayed on.load when the page is first loaded. When this is hidden and the other s shown through the "show" function they load in classic CSS fonts without the SIFR applied.
Is this unavoidable with the SIFR setup. Or am I not calling the divs properly. I have set the SIFR to apply to the selector and indeed it works fine on the for the displayed on load. It doesn't work for the within other . In theory I would think its possible to load the SIFR on all divs on page.load even if those divs are presently visibility:hidden.
What's the verdict on this?
Hope someone can help.
Cheers,
John
After you show the previously hidden div, execute the sIFR.replace calls again to replace the content in those elements.
Related
I've created a tablesorter through JSFiddle, and the best way apparently to show it on a site is through adding /show at the end. However when I add this to my site, and all the other ways I've tried there is a scrollbar within the tablesorter and the heading can be scrolled up because of the results and edit in JSFiddle.
I know that probably sounds like rubbish, so I've attached a link to my site where it apepears, as you can see it is scrollable.
Is there a way of disabling the scrollbar in the HTML, CSS or JavaScript so that when it appears on my site it is fixed.
I hope ive been clear, thanks.
Link - eylestom.wix.com/tenation#!releases/c16vn
I'm assuming you mean the scrollbar in the iframe that contains your JSFiddle? I think that iframe is taller than the "tabs" div containing it. I made an inline change to the height of the iframe to 530px (allowing for your header block) and the scrollbar isn't displayed.
So, I think you could just make the iframe smaller, or make your containing div taller, or set its overflow to 'hidden'. But, your page looks like it's going to contain a lot of data down the road. I'd suggest you look at adding the 'stickyheader' or 'scroller' widgets to your tablesorter to manage the overflow more gracefully.
<iframe src="//fiddle.jshell.net/tome98/abkNM/5961/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" style="height: 530px;"></iframe>
I currently have an html page including a series of patterns organized as follows :
a div including a jqplot aligned to the left of the page
the associated table below the jqplot.
I'd like to align the table to the very right of the jqplot.
Here is a link showing the current organization for the html :
http://snovae.in2p3.fr/canto/scratch/spectra_sample/SN2007le_fullrun.html
As for now I don't have any style within the html.
The jqplot is called with the div and the table is not currently within any div if this helps.
Any help will be greatly appreciated.
You should set your .jqplot-target elements to have a margin-left: 0px.
Those seem to have inline style set, act on this and set their style (which is always the same) via a css acting on their class, not on each individual elements.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
I'm attempting to use the accordion for a very long list of records, where the accordion is wrapped in a resizable div that is given a fixed amount of space on the page and you would scroll to find the h3's that are too high or too low to see. The problem that I'm having is that the headers always force the size of their div, so the "overflow: scroll" is essentially ignored as the h3's spill out of the explicitly sized parent.
We are using jQuery 1.6.2, and UI 1.8.16
Seems to be working fine for me: http://jsfiddle.net/GVFsn/
try applying style="clear:both" to the parent, that should work.
The accordion is floated content, and the browser does not know where it ends.
Either that or steal the .clearfix class from FaceBook
I have an ASP.Net-MVC application that is mostly complete. However, I have one page that contains radio buttons. When that page is displayed in Firefox or Chrome, the radio buttons are displayed in a horizontal row (which is what I want). But when the page loads in IE, the radio buttons show up in a column. I am using the Html.RadioButton helper.
I have tried editing several of the css properties in the master stylesheet, but I have not been able to come up with a solution.
Have any of you encountered this before? If so, what could the solution be?
It would be handy #Jacob, if you could list what you have tried.
Have you tried the css display:inline?
Or have you tried putting them as <li>'s in a <ul> and then setting the display:inline on the ul or the li's?
I ended up just putting the radio buttons in a table row. It's not the most elegant solution, but it works all the time.