i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code
Related
I am upgrading from Fancybox-2 to Fancybox-3. My site uses fancybox to display blocks of HTML as an overlay on page. For instance, if you click on my Terms and Conditions, fancybox uses a file fb/tandc.php that has all the HTML of the box to be displayed.
Some of the boxes use data from my database and use php programming to generate the HTML - for instance I have a list of participants retrieved from the database.
When planning the upgrade, I added a switch on my site that allows me to decide if I want to run version 2 or 3 of fancybox. In testing, many of the boxes display the same whether I use version 2 or 3 - in other words I have not changed the source code, only the way I call fancybox.
My problem is that for some reason, some boxes do not display the full content. When I have checked the page source, everything is there but I have noticed that some elements have style="display:none" defined. This is not coming from my code, so I assume fancybox is adding it.
My question, therefore, is how can I stop this?
I have tried to find answers but not successful. I did find a post that disabling AdBlocker in Chrome may help but this had no impact.
I get the same behaviour in Chrome and FF
I have included screenshots that show how the elements contain the style; the code used to call fancybox; the options I am using.
page debug elements
call to fancybox
options used
Just added this screenshot of code to be displayed. I tried adding a style that I hoped would override what fancybox is doing, but did not work either.
code to be displayed in fancybox
This is how the content looks in v2 fancybox
content in version 2
and if I have exactly the same content, but use v3 fancybox:
exactly same content in version 3
Using ajax to load fancybox with content from a file seems to create elements where it inserts style="display:none" - I have no idea why. However, I figured a work around where instead I created inline content on the page that is hidden and then simply used data-src="#hiddenContent" as in the docs.
It's made my page huge though when I have a lot of surveys, with a lot of participants on each!
I have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!
I have tried: http://www.w3.org/Style/Examples/007/center.en.html. I am a newbie and still learning. Nothing works. Even tried to no avail. It stays to the left!
I am using Cm4all and do the widgets manually in File Manager with Netfirms. They had me:
Log into the control panel with your account username and password.
Click on ‘FileManager’ under ‘Website’.
Click on ‘Settings’.
Check the checkbox ‘Use Richtext Editor’.
Then:
I also called the number you instructed and they said:
centering big groups of content, or centering groups of one specific object on your site can be done with divs and css.
Here are some hyperlinks to instructions/tutorials for common website operations like this.
They gave me three links but can't post the question with the links, says I need at least 10 reputation to post more than 2 links.
Nothing I do will make it leave the left side!!
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.
Hey I just began working on a new project that requires, tab navigation, and within each page, more tab navigation, and then within those pages dynamic ASP.NET content. The problem is I do not want all of my code on one page, that would just be a very large and bloated page. I was wondering what available methods of approach there are for this issue. I checked jQuery tabs, and I see I can link html files using AJAX but I need aspx files not just HTML.
Thanks ahead of time.
I've had to deal with this on many projects. After trying quite a few libraries my approach to tabs is to always do these myself using plain CSS.
But note having multiple layers of tabs is a but usability no-no. Remember Windows 3.x and 95 did this quite a bit. It's less an issue these days. You can try an accordion control along with the tabs to filter your screens
One one particular project, we used DevExpress ASPxTabPages for a while. These worked well, but were a bit heavy for such a simple task. We then moved the project to JQuery, but ran into situations where JQuery UI Tabs started to be an issue as well. Particularly when generating tabs using master pages and render actions in ASP.Net MVC. We finally settled on regular CSS and HTML. Javascript really isn't even needed. Though I'm sure JQuery can be used to spruce things up.
An example of CSS tabs can be found at http://www.htmldog.com/articles/tabs/. There are live examples on that page as well.
what you could do is:
make a tab a span
when clicked on that tab/span, fire jquery and do a GET to a page on the server which represents the tab content
pro: no initial loading of the content of the tabs
Con: slight delay when you click a tab (first time only if you can cache the content of the tab)
this is done when you think that only a few of all of your tabs are clicked: you don't have to load all the data users ain't gonna see.
If you think the user is going to look at all the tabs, then you can load everything in one page. You can use a user control for each tab so no super large page and wrap the output of the usercontrol in a DIV
Then also make a tab a span, and when clicked on the tab/span, make the right DIV visible and hide the others.
I just made a user control that contained the Ajax Tab Control for my sub menu. Each tab actually takes you to a different page.
I blogged about how I did this HERE.