jQuery EasyTabs: All Content Shows On Load - javascript

I'm using the jQuery EasyTabs plugin. I have a web page with two tabs working pretty well. However, when the page containing the tab code loads, for a brief moment both tabs' panel contents (not the tabs themselves) are visible. It's only for a moment, then the second tab's panel content is hidden, and things work as they should. Super annoying.
Any attempts I've made to hide or delay these content from being shown using jQuery or DOM calls have not been successful. Here's the call I make, whose code is loaded just above the HTML of the tabs and panels.
$(document).ready( function() {
$('#tab-container').easytabs();
});
Any suggestions would be great. Thanks.

My suggestion, as a workaround and without being able to actually see the problem, is to initially hide the offending elements with CSS then show them after easytabs() has been called. The problem is likely because there is a tiny delay between the elements loading and the jQuery call.
So #tab-container { display: hidden }; then:
$(document).ready( function() {
$('#tab-container').easytabs();
$('#tab-container').show();
});

Related

Bootstrap modal on html element append missing css

I have a website with some bootstrap modal windows. On server rendering these modal windows everything is as should be, but after loading (appending) new items and theirs modal windows, somehow attached modals don't have bootstrap css.
Steps:
opening web page in gridview it shows 30 items blocks
clicking on any block shows modal with correct css
clicking on 'Load more' I am using ajax call for getting more
items on a page and server generated html for these Items then
append to specific div.
items appended correctly but clicking on appended item modal
window missing css.
Probably I need to recall bootstrap css or js after appending new items to page?
Here you are identifying element by id. That's why JQuery selector is taking only first matching element and ignoring others.
To fix this issue, use class to identify element in JQuery selector.
I found the answer here: bootstrap toggle doesn't work after ajax load
And my actual fix was reloading attributes after ajax success:
setTimeout(function(){
// add an element dynamically,
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
$('.tags-list').tagsinput('refresh');
}, 1000)

Targeting instances of JQuery UI Accordion without knowing what they are

I have a site that uses jquery UI accordions on different pages. The script for these accordions is on the page in each case.
We're looking into daily site prints for all pages so we need those accordions to be fully expanded when we do the site print (we'll be doing this by detecting the site printer's userAgent string because they can issue a custom one).
The site printer can halt execution of javascript on a page to keep content fully expanded but we also use AJAX scripts so that would prevent content from loading.
So we need a script that targets any jquery accordions on a page and makes them fully expand. We have a custom.js file that is present on all pages so we could place a command there.
My question is, is it possible to target all instances of accordion objects without already knowing what they are? I'm looking at the possibility of putting a script in the custom.js file rather than having to rewrite all the JQuery accordion calls page by page (and trying to get everybody that adds stuff to the site to also remember to write a conditional userAgent based expand everytime they use an accordion).
Without seeing your code or knowing anything about your current HTML, you can try something like this:
$(".ui-widget.ui-accordion").each(function(index, elem){
// Code that you want to execute on each Accordion
// For example, we could disable each one:
$(elem).accordion("disable");
});
I don't see a method to expand all panels at once. Likely, you would have to activate each panel.
Found this: jQuery UI Accordion Expand/Collapse All
It advises using the theming to make the accordion look correct, and then roll your own ability to expand all.

jquery show/hide when page loads

I am having an issue with jQuery. I have a menu page in my app and when I click on a page I want certain divs to be shown and some to be hidden. When I click on a page the following script
$(document).ready(function() {
$("#sp").hide();
$("#fea").hide();
$("#lib").show();
});
only works if I reload the page.
If the document is already loaded when I click on the menu again and go to a different page the same function doesn't work on that page even though I have the same function between script tags on multiple pages.
So in a nutshell whatever page loads first has the function applied. All other pages have to be refreshed before the function is applied. All of my pages are loaded from the menu page.
Does anyone know how to apply the function every time I load a page from my menu page?
I have also tried:
$(document).on("pageshow", "#pageID", function() {
$("#sp").hide();
$("#fea").hide();
$("#lib").show();
});
and I have the same issue where the function is only applied when I refresh.
Why you didn't use css for this? It will work even if a javascript will be disabled in the browser settings
Ok, I was able to figure out a solution. I am still not sure why the problem was occurring in the first place but I changed my function to this:
$('body').on('pageinit', function() {
$("#sp").show();
$("#fea").hide();
$("#lib").hide();
});
So thank you to everyone who made snide remarks and down-voted instead of providing a solution, your input was invaluable to my project. ;)

better way to hide modal elements on page load [duplicate]

This question already has answers here:
When creating a dialog with jquery, how do I hide the dialog div?
(2 answers)
Closed 8 years ago.
Imagine a fairly standard web app page using jQuery and Knockout which uses mostly modal dialogs for editing data. The modal dialogs are created via jQuery UI and everything works. As the page loads, the JS runs, the dialogs open when the button is clicked, do their job, all is fine, great, and peachy.
However, as the page is loading, the elements in the divs containing the HTML for the modal controls will flash just for a second before the script to turn them into dialogs completes, after which they're once again hidden until the dialog is opened. And yes, this will happen even when the script has been wrapped in the $(document).ready() call since all that does is prevent manipulation until the DOM has been loaded.
One method which seems to make this go away is to add visibility: hidden; to the CSS of the class which I assign to my modal divs which stops the elements form appearing on page load but it also then turns those elements inside the modal control invisible and I have to add the following line to the function which opens it...
$modal.css('visibility', 'visible');
Again, all this seems to work, but I'm wondering if anyone knows a better way to effectively hide all of the inputs and dropdowns, and text inside what will become a modal control on page load than by playing with the CSS when the dialog opens.
Add a class called hidden to your css file.
.hidden{
display: none;
}
This will allow you to reuse this class on other elements. If your using twitter bootstrap this class should be available: http://getbootstrap.com/css/#helper-classes-show-hide

creating jquery effect to show new page in same screen

In some of the website I found header and footer remains fixed.
When user click on any link in header or footer then new page opens from downside(or any other way) on same window.
I dont remember exactly the link for such site. I appreciate if someone can show me how that work.
I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates.
I google it but could not think correct words to get this exactly.
If you do know how to navigate (just in case - here is an example: AJAX navigation), but need to see examples of navigation "styling", Codrops would be a great place to start:
Codrops - navigation examples
Codrops - page transitions
"I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates."
The simplest method is to have a container div within which you put the variable content (i.e., the current "page"):
<div id="content"></div>
(When your page is first loaded that div can have default content as appropriate, it doesn't have to start empty.)
Then using the Ajax method of your choice (that you mention you already know how to use), in the success handler you then use an animation method to hide that main div, then change its content to the html returned via ajax, then show the div again using the animation method of your choice:
$.ajax({
url: 'yourUrlHere.com',
success : function(newContent) {
$("#content").fadeOut(1000, function() {
$(this).html(newContent).slideDown(1000);
});
}
});
Demo: http://jsfiddle.net/M4ZZ6/
From there you can get as fancy with the transition as you like by applying different animation effects. Or use a page transition plugin...
If you want the easy way check this.
<div id='loadpage' style='display:none'></div>
Jquery code:
$('#loadpage').load('mypage.php',function(){$('#loadpage').fadeIn(300);});
You can add more efects for your loads.
Here is the example.
JSFiddle

Categories

Resources