so I have a jQuery accordion menu that I want to implement to my wordpress homepage, the problem is everytime I put the menu there, it extends my page way down like 1200 px height, and it`s the only one that does this.
How can I stop it from declaring that height and let me make it exactly how long the menu is extending, or even better go once with it. Again, I am talking about a wordpress plugin.
The theme I want to implement the menu in is : http://themeforest.net/item/celta-business-modern-corporate-wordpress-theme/full_screen_preview/218824?ref=lvraa
Left column
First you should try to set autoHeight to false , this will fix the height problem.
Then I could find the problem regarding HTML lists, I grabbed your HTML, put it locally and used the demo source for jQuery UI accordion (the section 3 have some HTML list inside) and it seems to work fine.
Hope it will Help :)
We all need your code to see the actual problem. You can jsfiddle it.
Also, try making the autoHeight to false.
$(".yourselector" ).accordion({ autoHeight: false });
When you initialize the accordion, include autoHeight: false in the options. It will then use the native heights specified in each div.
It is impossible to give you a sure answer without knowing which accordion plugin you are using. It would have been very helpful for you to give a URL that showcases your issue.
If you are using the jQuery UI Accordion, you can try:
initializing the accordion with autoHeight set to false.
explicitly set a height for the container of your accordion. for example:
< style>
#accordion {
height:200px !important;
}
< /style>
< div id="accordion">...< /div>
initialize the accordion with fillSpace set to true and then explicitly set the height of the accordion's parent element.
If you are using another library or if you developed the accordion functionality yourself, please tell us what library you are using and share your code with us.
You need to change autoHeight to false. Doing so may reduce the quality of animation, but should fix the height issue.
It is caused by the accordion taking the height of the largest div. Lots more about it here:
http://docs.jquery.com/UI/Accordion#option-autoHeight
$( ".selector" ).accordion({ autoHeight: false });
To overcome this issue, You must set two properties as below :-
$( ".selector" ).accordion({ autoHeight: false });
and
$( ".selector" ).accordion({ clearStyle: true });
Refer the - official jQuery accordion documentation
Related
I read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something I've done once or twice before using the same PHP classes.
I can get the basic functionality to work, but a button to click to add more images has always failed to work. I keep reading jQuery documentation and I've tried various JavaScript debuggers but I always end up with no images being added to my gallery when I click.
Trial and error is definitely required to get the best looking layout.
The biggest album cover seems to be 500 pixels with the smallest found in APIs was 75, choosing the right column width helps. I'm currently using 75 but 50 might have worked better. I just want to get adding images to work and be done with this little experiment.
I wanted to try something similar to this technique of appending more images to the bottom. I want to append more album covers which I fetch from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All the album covers come from APIs and I use PHP to find the URLs given the album title and artist. My code is running: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
I've changed the CSS rule many times, now I just have the default CSS suggested by the Isotope author.
PHP Code that loops and produces 10 divs with one image per div
$myAlbumCollection->randomMember();
$count = 0;
print('<div id="container">');
while ( $count < 10 )
{
// Check that current album is in Amazon
$buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
$imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
{
$count++;
print('<div class="item">');
print('<a href="' . $buyLink . '">');
print('<img src="' . $imageURL . '" />');
print('</a>');
print('</div>');
}
$myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find enough album covers, but in reality will timeout
}
print('</div>');
And lastly here is the javascript, the final problem is in here somewhere:
<script>
$(function(){
var $container = $('#container');
$('#insert a').click(function(){
var $newEls = $.get('./moreAlbumCovers.php');
$container.isotope( 'insert', $newEls );
return false;
});
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
The link gets called when clicked, I've stepped through it. The PHP produces DIVs As and IMG tags. I really am not sure what I'm doing wrong and repeated readings of the documentation isn't solving it. I've never really been a JavaScript guy. I'm not even a PHP guy, it seems right but repeated efforts to make it go have failed despite generous assistance and offering a bounty.
Thanks for the help.
Try adjusting the columnWidh value and width of item. Masonry aligns element with best fit column first layout. It works on mathematical equations. So a perfect, brick wall fitting is only hypothetical ideal case. It takes me a few tries on firebug and other tools to get the masonry working with ideally fitted layout. The key is to get the value of columnWidth and width, gutter etc in such a way that it solves the logic equations in good values.
:: EDIT ::
I found a link saved in my pockets page, of which i totally forgot about. It is a great tutorial. So i came back to give it here. Recommended to everyone who have trouble getting started with this plugin.
http://www.netmagazine.com/tutorials/get-started-jquery-masonry
Masonry isn't a very descriptive name for it. In fact it's an optimizing problem. It's something that is called np problem because there is too many permutations to check. Especially the masonry jquery plugin is a 1d bin-packing solver and it's arrange the bricks in vertical columns. Css by default arrange the bricks in horizontal order. In other words it's a depth-first sort of an adjacent tree model.
Update: Try adding masonry to your dummy div and delete everthing else:
$('#dummy').load('./moreAlbumCovers.php').masonry("reload");
I think you overthink it. The variable is empty because you assign it to a dom object. It's most likely become also an object and not usefull.
It's relly well explained here Jquery Masonry Seamless Responsive Image Grid + I would try to do exactly the same with isotope http://isotope.metafizzy.co/
edit:
I think isoptope and masonry just sorting out 1 dimensional bin packing, and what you are maybe looking after is 2 dimensional bin packing
like this http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (check complex case it fits all boxes perfectly )
and lib for that https://github.com/jakesgordon/bin-packing/
To get the more brick wall like effect you don't set an item width using CSS. This wasn't crystal clear given the instructions here. But a lot of testing seems to indicate that just specifying a columnWidth and then letting the browser and javascript do it's best gets closer to the performance I'm looking for. Will have to tweak and eventually try appending...
i'm using the bxSlider plugin (a slider similar to jcarousel) on custom Magento store.
While the slider is istantiated on documet.ready() (in the head html section) by this way:
jQuery('#slider2').bxSlider({
pause: 4000,
auto: true,
autoControls: true,
displaySlideQty: 4,
moveSlideQty: 1
});
I want to change auto attribute to false in the php code if the slider items count is less than 5. I've tried to change it with:
<?php
// slider items count
$prom_count = $this->getPromotionalProducts()->count();;
?>
<?php if($prom_count<5): ?>
<script>
$("#slider2").attr('auto','false');
</script>
<?php endif; ?>
but it doesn't work, so i'm not sure that attribute of objects instantiated on dom ready can be changed by this way. anybody could help?
The attr-method from the jQuery-library works with attributes for HTML-elements:
<img src="..." alt="...">
In this case, src and alt are "attributes".
The bxSlider is configured by giving the bxSlider-function an array. You can't alter this array after it was passed to the function.
What you can do to toggle the auto-show is using bxSlider's stopShow()-function. To probably do this, you'll want to save the bxSlider-instance you created:
var slider = jQuery('#slider2').bxSlider({
...
});
So you can then call the function on this object:
slider.stopShow();
Doing this with PHP and JavaScript in a mixed way (like you suggested) is ugly and should be avoided.
Instead, you should use a JavaScript-only solution:
var slider = jQuery('#slider2').bxSlider({
auto: true,
...
});
if (slider.getSlideCount() < 5){
slider.stopShow();
}
Note that getSlideCount() returns the number of slides, which is not guarantied to be the number of Images in the gallery! The number of slides displayed at once can be set by the displaySlideQty-attribute. The default however is 1.
It seams that there is a Bug which causes the startShow and stopShow-functions not to work: https://github.com/wandoledzep/bxslider/pull/43
As a dirty workaround, you could do something like this:
<?php
echo "<script type=\"text/javascript\">
jQuery('#slider2').bxSlider({
pause: 4000,
autoControls: true,
displaySlideQty: 4,";
if($prom_count >= 5) echo "auto: true,";
echo "moveSlideQty: 1
});
</script>";
?>
Looks like there is no API function for this. Maybe the config will be loaded again if you use reloadShow(). If that does not help you have to read the source code.
That will set the auto attribute on the element it self, not the auto option of the plugin. It doesn't look like the plugin has the ability to change options after you have instantiated it, although I only had a quick look.
Can you not set the right auto value when you run the plugin by putting the php code first?
I'm building a dynamic navigation bar which is controlled by PHP, and I'm using images within my list. And I'm applying jQuery for the 'hover' effects. This is the PHP code:
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
And in my navigation list I'm setting 'display:none' and 'display:inline' depending on the return value of $page using a PHP 'if' statement. See code:
<ul id="cssdropdown">
<li class="headlink">
<a class="lightNav" href="index.php" <?php if($page == 'index'){echo "style='display:none !important'";}else{echo "style='display:inline'";}?>><img src="images/navButtons/home.png" /></a>
<a class="darkNav" href="index.php" <?php if($page == 'index'){echo "style='display:inline !important'";}else{echo "style='display:none'";}?>><img src="images/navButtons/home-dark.png" /></a>
</li>....
This is all working fine, the display of the Nav bar images change depending on what page the user is at. But my problem is now I'm trying to integrate jQuery to get a nice 'mouseover / hover' effect. See jQuery code:
$("li.headlink").hover(function(){
$(this).find("a.lightNav").css("display", "none");
$(this).find("a.darkNav").css("display", "inline");
},function(){
$(this).find("a.lightNav").css("display", "inline");
$(this).find("a.darkNav").css("display", "none");
});
But this is causing problems. When the user moves the cursor over the image in the Nav bar for the current page (ie the 'dark' image), it removes the display attribute set by PHP (obviously).
So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none' and tailor my jQuery from there, but for the life of me I cannot figure out how to do, I'm not the worlds greatest javascript/jQuery coder. Is there a way to check if an element has a particular CSS property applied to it, I googled and fiddled with my code for hours, but to no avail.
Thanks in advance everyone.
P.S. I added the CSS !important in my nav bar within the PHP if statement, but this for some strange reason, is only working in Chrome, all other browsers are ignoring this rule.
with jQuery you can check an attribute value like this:
... your code...
alert($(this).find("a.lightNav").css("display"))
As far as using jQuery to hide/show elements, simply use:
$(this).find("a.lightNav").hide()
$(this).find("a.darkNav").show()
No need to fiddle with "display", it's already built-into hide()/show(). You should not need use this either:
style='display:inline !important'"
By default the display is already block or inline, so unless you're using "display:none" you can usually lave these out.
If you have a left-floating menu you should be using float:left, not display:inline
Also inline styles override stylesheet CSS, so you should never need to use !important.
One hint at styling menus, style the A-tag, not the LI. Put the events on the A tags, not the LIs.
If you want to learn how to style menus properly, see my tutorial:
I love lists.
"So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none'.."
This is untested but you could try something like...
if ($(this).attr('style') == "display:none") {
// do something
}
else if ($(this).attr('style') == "display:inline") {
// do something
}
However, you may want to try addClass() and removeClass() instead of changing and/or using inline CSS.
yep..i'd second that using addClass()l and removeClass() would be loads better...some code like
if($(this).hasClass('visible') {
// do something
}
else {
// do something else
}
seems far better and professional and readable...but just me saying...
How would I go about displaying a tooltip when the user hover overs some text? These text are keywords. I don't want to manually add these tooltip for each keywords. I am looking for a way to create a script of some sort to automatically do this either on the client side or server-side. When a user hovers over these keywords, and if the keyword exists in the database or an array it should retrieve the information from the database.
Please let me know if there are any good tutorials available on how to solve this problem.
There are many useful plugins to create nice tooltips.
I know two of them that use the jQuery framework:
mb-tooltip: [http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/]
jquery-plugin-tooltip: [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]
You have to surround your keywords with a span element and a class to apply the jQuery selector.
Maybe it's preferable to query for keyword presence server-side creating the ad-hoc html code for displaying the right tooltips, otherwise you have to create a tooltip in an AJAX way, handling the mouse hover event on the keyword.
You can also use YUI as an alternative to JQuery plugins. Here there is an example of what you want to do Simple Tooltip Example with YUI
You might consider using the HTML Global title Attribute. If you're looking for something simple that's already built in to HTML (and thus usable in PHP without addins) then that would be my go-to solution. I'm considering it's use in a project myself.
Use the jQuery tooltip plugin, which can be found here.
Code looks like:
$("img[title]").tooltip()
There is a very popular Jquery Plugin "Beauty Tips" for this:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Example of Beauty Tips with options:
$('#example3').bt({
contentSelector: "$(this).attr('href')",
fill: 'red',
cssStyles: {color: 'white', fontWeight: 'bold'},
shrinkToFit: true,
padding: 10,
cornerRadius: 10,
spikeLength: 15,
spikeGirth: 5,
positions: ['left', 'right', 'bottom']
});
I'm trying to place multiple resizable and draggable div's on one page that move (vertically) inside their own parent div.
you can take a look at http://bit.ly/bCutBE
However, these div's act really strange when I want to resize them, especially from the north side, they kind of move out of the screen very fast, while they shouldn't be able to get outside the parent div.
I only want the div to be able to move and resize vertically inside it's parent, the dragging-part works pretty good, but the resize part give this problem.
I can't really describe it better than this, but take a look for yourself and it will be clear immediately when you try to resize one of the coloured div's: move it a little downwards and try to resize it from the north side.
the problem seems to be caused by the containment: 'parent', line of the resizable. when I delete this line it works fine, but then the coloured blocks don't stay in their parent, and I want them to stay inside their parent.
I hope someone can help me with this...
the jquery code I used:
$(document).ready(function(){
$(".move")
.draggable({
containment: 'parent',
grid: [50,50],
axis: 'y'
})
.resizable({
containment: 'parent',
grid: [50,50],
handles: 'n, s',
minHeight: 50
});
});
this seems to be a bug with draggable and sortable you will find a workaround here