earwave
Forum Replies Created
-
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timealrighty just a weird functionality problem going on
so i got my accordion working, and i enabled collapsing. However, there is a small problem: when i collapse the active section, it automatically shifts the page to the top of the accordion.
For example, if I have the bottom post open, and i click to close it, it automatically scolls to the top of the the page (the top of the accordion).
do you know what this could be attributed to? none of the options for the accordion really address this
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeWoo! it’s working now! i just wasn’t sure which of the downloaded files from jquery were the right script, i checked the page source and thought that the jquery.ui.accordion.js was the correct one,
i switched that file with jquery-ui-1.8.14.custom.min.js and loaded that one, and now the accordion is working.
I hopefully won’t be running into any more problems, but thanks for the help, again it’s much appreciated! I’ll buy you a virtual dinner haha!
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeok so i put the jquery-ui-1.8.14.custom.min.js in the js folder (under wp-admin with most of the other js files)
then i upload the jquery.ui.accordion.js (or do i upload the jquery.ui.accordion.min.js) into the theme folder (in the folder script that created), and also the accordionstuff.js into the theme folder, which would be this script:
jQuery(document).ready(function() { jQuery("#accordion").accordion({ autoHeight: false, collapsible: true }); });with these file names in mind, is my problem in the functions?
function enqueue_accordion_script() { wp_register_script( 'enqueue-accordion-script', get_stylesheet_directory_uri() . '/script/jquery.ui.accordion.js', array( 'jquery' ) ); wp_enqueue_script( 'enqueue-accordion-script' ); } add_action( 'init', 'enqueue_accordion_script' ); function add_jquery_accordion() { wp_enqueue_script( 'add-jquery-accordion', get_stylesheet_directory_uri() . '/script/accordionstuff.js', array( 'jquery', 'enqueue-accordion-script' ) ); } add_action( 'init', 'add_jquery_accordion' );Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeok quick question about downloading the jquery accordion script. Do i only select the jquery accordion widget from http://jqueryui.com/download?
or do i download everyything, and then unzip all the contents into my theme directory? right now i only took the jquery.ui.accordion file and put it in my theme directory.
alright i added the classes
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"> <?php while ( have_posts() ) : the_post() ?> <h3 class="ui-accordion-header"><div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" )" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div></h3><!-- .post --> <div class="ui-accordion-content"><?php the_content();?> </div> <?php comments_template() ?> <?php endwhile ?></div> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>nothing yet,
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeAlright, i put the accordion div outside of the loop so there is one encompassing all the posts
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"> <?php while ( have_posts() ) : the_post() ?> <h3><div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" )" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div></h3><!-- .post --> <div><?php the_content();?> </div> <?php comments_template() ?> <?php endwhile ?></div> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>i looked the the source page and there is one div with the accordion id that includes all the posts. still nothing, i appreciate your help. what is wrong?
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeOops i had the <div id=”accordion”> outside of the loop
I fixed that, but I’m still not getting the whole accordion collapse/show function going on
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timealright i downloaded the right script i believe and replaced that in the functions.php so it loads this
http://blazinglucy.com/wp-content/themes/autofocus/script/jquery-accordion.js?ver=3.2.1
however there is no change…
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeOk my mistake, fixed the script url code problem and clicked on both links, they are the right scripts.
also put the <h3> tags within the loop,
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"><?php while ( have_posts() ) : the_post() ?> <h3><div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" )" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div></h3><!-- .post --> <div><?php the_content();?> </div> </div> <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>however, it’s still not working.
is the script http://blazinglucy.com/wp-content/themes/autofocus/script/jquery-ui-1.8.js?ver=3.2.1 the correct one?
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeOk i put the functions in the right place and the js files in my theme directory.
I checked the page source and it’s loading the right js files.
However the problem still remains.
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"><h3><?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" onclick="thesong('blood-<?php the_ID() ?>')" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div><!-- .post --></h3> <div><span id="blood-<?php the_ID() ?>" style="display: none;"><?php the_content();?></span> </div> </div> <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>i encased the post in a div with the id “accordion”, and also placed <h3> tags around the part i wanted to be the header.
Is the <h3> the source of my problem? for example, could i use a tag besides <h3> to signal that part that i want to be the header? Or if i could specify an id for the header such as <h3 id=”boomboom”>, where the accordion would only apply to <h3> with that id and not <h3> tags in general (because that tag is already formatted a specific way i believe.
here’s my functions code again
function enqueue_accordion_script() { wp_register_script( 'enqueue-accordion-script', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/themes/autofocus/script/jquery-ui-1.8.js', array( 'jquery' ) ); wp_enqueue_script( 'enqueue-accordion-script' ); } add_action( 'init', 'enqueue_accordion_script' ); function add_jquery_accordion() { wp_enqueue_script( 'add-jquery-accordion', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/themes/autofocus/script/accordionstuff.js', array( 'jquery', 'enqueue-accordion-script' ) ); } add_action( 'init', 'add_jquery_accordion' );do i have to add anything into the home.php file for this to work? or is it just a matter of the <h3> tag that i’m using.
thanks again for your patience
Forum: Fixing WordPress
In reply to: Onclick to reveal only one "content" at a timeOk i struggled for quite some time to get the code right with the accordion but there are so many parameters that it’s just coming out a mess.
I tried following your post and the links in it but i’m not having any luck.
If this is the code for my home.php, is there any thing you can tell me that i’m doing wrong?
here’s the old one:
<?php get_header() ?> <script type="text/javascript"> function thesong(showme) { var mysongs = new Array("blood-<?php the_ID() ?>"); for (boom in mysongs) { document.getElementById(mysongs[boom]).style.display = 'none'; } document.getElementById(showme).style.display = 'block'; } </script> //this is what i'm currently using to show/hide content <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" onclick="thesong('blood-<?php the_ID() ?>')" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> //this is the play button <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div><!-- .post --> <div><span id="blood-<?php the_ID() ?>" style="display: none;"><?php the_content();?></span> </div> //here is the hidden content <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>and here’s the new one where i tried the jquery accordion.
<?php function enqueue_accordion_script() { wp_register_script( 'enqueue-accordion-script', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/scripts/jquery-ui-1.8.js', array( 'jquery' ) ); wp_enqueue_script( 'enqueue-accordion-script' ); } add_action( 'init', 'enqueue_accordion_script' ); function add_jquery_accordion() { wp_enqueue_script( 'add-jquery-accordion', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/scripts/accordionstuff.js', array( 'jquery', 'enqueue-accordion-script' ) ); } add_action( 'init', 'add_jquery_accordion' ); ?> <?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"> <h3><?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" onclick="thesong('blood-<?php the_ID() ?>')" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div><!-- .post --> </h3> <div><?php the_content();?></span> </div> //this is content i want to hide </div> <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>i put content after the header (h3), but it’s not coming out to anything resembling what i want.
i saved this
jQuery(document).ready(function() { jQuery("#accordion").accordion({ collapsible: true }); });as accordionstuff.js
and downloaded the accordion script from teh jquery website, which i saved as jquery-ui-1.8.js
this just seems extremely complicated, to me at least, so if there’s anything you can point out if would be much appreciated.
Forum: Themes and Templates
In reply to: Autofocus side buttonForum: Themes and Templates
In reply to: Autofocus side button