|
JavaScript - Swf To Trigger Jquery Scrollto Effect?
Hey everyone, I'm a NOOB, yeah, its hard at the beginning but you have to start somewhere right? Anyway I'm currently building a website that incorporates JavaScript, ActionScript, and the usual CSS and XHTML, but I've run into a bit of a snag. Our wishes for this grass roots web page was to add Ariel Flesler's ScrollTo jQuery plugin to our navigation, to dynamically slide our entire pages from left to right, right to left, upon the users choice. But, our navigation buttons, on our homepage in particular, are within a SWF file.
Now is it possible to trigger the ScrollTo effect from buttons within a SWF? If not, can you provide a alternate solution to this dilemma? Thank you all, and I'm happy to be a new student of this community. Similar TutorialsHi I am having a problem with that code : Code: <!DOCTYPE html>
<html>
<head>
<title>ScrollTo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
</head>
<body>
<div id="sections">
<ul>
<li id="s1">
<h2>Section 1</h2>
</li>
<li id="s2">
<h2>Section 2</h2>
</li>
<li id="s3">
<h2>Section 3</h2>
</li>
<li id="s4">
<h2>Section 4</h2>
</li>
<li id="s5">
<h2>Section 5</h2>
</li>
</ul>
</div>
</div>
<a href="#" onclick="$('#sections').scrollTo($("#s5"));>#5</a>
</body></html>
onclick="$('#sections').scrollTo($("#s5")); is not working thank you for helping Hey guys, im pretty new to using Jquery and coding period. i came across a problem with the .scrollto plug-in and i have searched up and down for an answer and none would really solve the problem. im trying to run .scrollto to jump from one div to the next with a smooth animation in a horizontal website. this is what the head tag looks like so far <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script src="scripts/jquery.localscroll-min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $.localScroll(); }) </script> i tried removing either local scroll or scrollTo and see if there was a conflict but that wasnt the case. ive seen the script run on a webpage without having to add $.localScroll(); to every link, right now it just doesn't move at all. any help would be greatly appreciated. I had a plugin created and the Jquery is not working correctly. Can anyone help me sort this out? I have exhausted all other options. Thanks. You can see this 'calendar' plugin here (near bottom of page): http://billboardfamily.com/blogs/ ISSUES: 1) The calendar sliding effect needs to be left/right as opposed to from the bottom. 2) 2 months should always be shown at all times 3) After you go through all months...it freezes completely 4) Is there anyone who can improve the navigation buttons? They are pretty weak at the moment. Here is the code: Code: <?php
add_action('widgets_init', 'pc_widgets_init');
define('PCAL_CAT', 6);
function pc_widgets_init() {
register_widget('pc_widget');
}
function get_post_calendar_html(){
global $wp_version;
?>
<style type="text/css">
.wp-calendar{ width:160px;}
.wp-calendar div.calendar {width:100%;}
.wp-calendar caption {
color:#48B05A;
font-weight:bold;
margin-bottom:6px;
padding:0;
text-transform:uppercase;
font-size:.9em;
text-align:left;
}
.wp-calendar tr {margin-bottom:0;}
.wp-calendar td, .wp-calendar th.days {width:26px;height:26px;padding:0;margin:0 1px 1px 0;border:none;}
.wp-calendar td.pad, .wp-calendar th.days {background-color:#eeeee7;}
.wp-calendar th.days {text-align:center;padding-top:6px;height:20px;}
table.mini {margin-right:-1px;}
.wp-calendar td.view-item {margin:0; background-color:#d9d9cd; text-align:center;width:25px;height:20px; padding:6px;}
.wp-calendar td.view-item a {text-align:center;padding-top:6px;color:#333;font-weight:bold;}
.wp-calendar td.today {background-color:#48b05a;}
.wp-calendar td.today a {color:#fff;}
</style>
<script type="text/javascript">
function pcal_prev(){
if(jQuery(".wp-calendar:visible").length > 1){
jQuery(".wp-calendar:visible:first").slideUp('slow');
jQuery(".wp-calendar:visible:last").next('.wp-calendar:hidden:first').show('slow');
}
}
function pcal_next(){
if(jQuery(".wp-calendar:visible:first").prev('.wp-calendar:hidden').length){
jQuery(".wp-calendar:visible:last").hide('slow');
jQuery(".wp-calendar:visible:first").prev('.wp-calendar:hidden:last').show('slow');
}
}
</script>
<span class="calendar_nav_bar"><a onclick="pcal_next()"><—</a> <span><?php echo $browse; ?></span>
<a onclick="pcal_prev()">—></a>
</span>
<?php
pcal_get_posts();
}
function pcal_get_posts(){
global $wpdb, $wp_locale;
$thisyear = gmdate('Y', current_time('timestamp'));
$thismonth = gmdate('m', current_time('timestamp'));
$lastmonth = $thismonth-1;
$lastyear = $thisyear;
if($thismonth == -1){
$lastmonth = 12;
$lastyear -=1;
}
get_post_calendar($thismonth,$thisyear);
// Get months this year and next with at least one post
$future = $wpdb->get_results("SELECT
DISTINCT MONTH(post_date) AS month, YEAR(post_date) AS year
FROM $wpdb->posts
WHERE post_date <='$lastyear-".($lastmonth+1)."-01'
AND post_type = 'post' AND post_status = 'publish'
ORDER BY post_date DESC");
$x= 0; //Hide counter, after the first one, it will disappear
foreach($future as $now){
get_post_calendar($now->month,$now->year,$x);
$x++;
}
}
// Calendar Output...
function get_post_calendar( $thismonth ='', $thisyear='', $hide=0) {
global $wpdb, $timedifference, $wp_locale;
$unixmonth = mktime(0, 0 , 0, $thismonth, 1, $thisyear);
// week_begins = 0 stands for Sunday
$week_begins = intval(get_option('start_of_week'));
$add_hours = intval(get_option('gmt_offset'));
$add_minutes = intval(60 * (get_option('gmt_offset') - $add_hours));
if($hide)
$style = "display:none;";
echo '<table class="wp-calendar" style="'.$style.'">
<caption>' . $wp_locale->get_month($thismonth) . ' ' . $thisyear . '</caption>
<thead>
<tr>';
$myweek = array();
for ( $wdcount=0; $wdcount<=6; $wdcount++ ) {
$myweek[] = $wp_locale->get_weekday(($wdcount+$week_begins)%7);
}
foreach ( $myweek as $wd ) {
$day_name = (true == $initial) ? $wp_locale->get_weekday_initial($wd) : $wp_locale->get_weekday_abbrev($wd);
echo "\n\t\t<th abbr=\"$wd\" scope=\"col\" class='days' title=\"$wd\">$day_name</th>";
}
echo '
</tr>
</thead>
<tbody>
<tr>';
// Get days with posts
$dayswithposts = $wpdb->get_results("SELECT DISTINCT DAYOFMONTH(post_date)
FROM $wpdb->posts
LEFT JOIN $wpdb->term_relationships AS trel ON ($wpdb->posts.ID = trel.object_id) LEFT JOIN $wpdb->term_taxonomy AS ttax ON ( trel.term_taxonomy_id = ttax.term_taxonomy_id) LEFT JOIN $wpdb->terms AS tter ON (ttax.term_id = tter.term_id) WHERE MONTH(post_date) = '$thismonth'
AND YEAR(post_date) = '$thisyear'
AND post_type = 'post' AND post_status = 'publish'"
."AND post_type = 'post' AND post_status = 'publish' AND ( ttax.taxonomy = 'category' AND $wpdb->posts.ID = trel.object_id AND trel.term_taxonomy_id = ttax.term_taxonomy_id AND ttax.term_id = tter.term_id AND tter.term_id = '".PCAL_CAT."')", ARRAY_N);
if ( $dayswithposts ) {
foreach ( $dayswithposts as $daywith ) {
$daywithpost[] = $daywith[0];
}
} else {
$daywithpost = array();
}
if ( strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'camino') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari') )
$ak_title_separator = "\n";
else
$ak_title_separator = ', ';
$ak_titles_for_day = array();
//sets the Density Thermometer
$ak_posts_for_day = array();
$ak_post_titles = $wpdb->get_results("SELECT ID, post_title, DAYOFMONTH(post_date) as dom "
."FROM $wpdb->posts
LEFT JOIN $wpdb->term_relationships AS trel ON ($wpdb->posts.ID = trel.object_id) LEFT JOIN $wpdb->term_taxonomy AS ttax ON ( trel.term_taxonomy_id = ttax.term_taxonomy_id) LEFT JOIN $wpdb->terms AS tter ON (ttax.term_id = tter.term_id) "
."WHERE YEAR(post_date) = '$thisyear' "
."AND MONTH(post_date) = '$thismonth' "
."AND post_type = 'post' AND post_status = 'publish' AND ( ttax.taxonomy = 'category' AND $wpdb->posts.ID = trel.object_id AND trel.term_taxonomy_id = ttax.term_taxonomy_id AND ttax.term_id = tter.term_id AND tter.term_id = '".PCAL_CAT."')"
);
// print_r($wpdb);
if ( $ak_post_titles ) {
foreach ( $ak_post_titles as $ak_post_title ) {
if ( empty($ak_titles_for_day['day_'.$ak_post_title->dom]) )
$ak_titles_for_day['day_'.$ak_post_title->dom]['title'] = '';
if ( empty($ak_titles_for_day["$ak_post_title->dom"]) ){ // first one
$ak_titles_for_day["$ak_post_title->dom"]['title'] = str_replace('"', '"', wptexturize($ak_post_title->post_title));
$ak_titles_for_day["$ak_post_title->dom"]['id'] =$ak_post_title->ID;
}else{
$ak_titles_for_day["$ak_post_title->dom"]['title'] .= $ak_title_separator . str_replace('"', '"', wptexturize($ak_post_title->post_title));
}
$ak_posts_for_day["$ak_post_title->dom"] +=1;
}
}
// See how much we should pad in the beginning
$pad = calendar_week_mod(date('w', $unixmonth)-$week_begins);
if ( 0 != $pad ) { echo "\n\t\t".'<td colspan="'.$pad.'" class="pad"> </td>'; }
$daysinmonth = intval(date('t', $unixmonth));
for ( $day = 1; $day <= $daysinmonth; ++$day ) {
if ( isset($newrow) && $newrow )
echo "\n\t</tr>\n\t<tr>\n\t\t";
$newrow = false;
if ( $day == gmdate('j', (time() + (get_option('gmt_offset') * 3600))) && $thismonth == gmdate('m', time()+(get_option('gmt_offset') * 3600)) && $thisyear == gmdate('Y', time()+(get_option('gmt_offset') * 3600)) ){
echo '<td class="today view-item">'.'<span>'.$day.'</span>';
}elseif(in_array($day, $daywithpost)){
echo '<td class="haspost view-item">';
echo '<a href="'.get_permalink($ak_titles_for_day[$day]['id'] ).'" title="'.$ak_titles_for_day[$day]['title'].'" '.$onclick1.' >'.$day.'</a>';
}else{
echo '<td class="view-item">'.'<span>'.$day.'</span>';
}
// any posts on that day?
if ( in_array($day, $daywithpost) ) {
//Outputs the Density Thermometer along with the day...
} else {
}
echo '</td>';
if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) )
$newrow = true;
}
$pad = 7 - calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins);
if ( $pad != 0 && $pad != 7 )
echo "\n\t\t".'<td class="pad" colspan="'.$pad.'"> </td>';
echo "\n\t</tr>\n\t</tbody>\n\t</table>";
}
/*Add Dashboard Widget via function wp_add_dashboard_widget()*/
function pc_setup_dashboard_widget() {
wp_add_dashboard_widget( 'pc_add_dashboard_widget', __( 'Posts Calendar' ), 'pc_add_dashboard_widget' );
}
function pc_add_dashboard_widget(){
pcal_getposts(0);
}
class pc_widget extends WP_Widget {
function pc_widget() {
$widget_ops = array('classname' => 'pc_widget', 'description' => __( "Show your blog's Future Posts in the sidebar.") );
echo $this->WP_Widget('pc_widget', __('Posts Calendar Sidebar'), $widget_ops);
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['browse'] = strip_tags($new_instance['browse']);
$this->flush_widget_cache();
$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset($alloptions['pc_widget']) )
delete_option('pc_widget');
return $instance;
}
function flush_widget_cache() {
wp_cache_delete('pc_widget', 'widget');
}
function form( $instance ) {
$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
$title = isset($instance['browse']) ? esc_attr($instance['browse']) : '';
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title'); ?></label>
<input type="text" name="<?php echo $this->get_field_name('title'); ?> id="<?php echo $this->get_field_id('title'); ?>" value="<?php echo $title;?>">
<p><label for="<?php echo $this->get_field_id('browse'); ?>"><?php _e('"Browse Post" text'); ?></label>
<input type="text" name="<?php echo $this->get_field_name('browse'); ?> id="<?php echo $this->get_field_id('browse'); ?>" value="<?php echo $browse;?>">
</p>
<?php
}
function widget($args, $instance) {
global $wpdb;
$cache = wp_cache_get('pc_widget', 'widget');
if ( !is_array($cache) )
$cache = array();
if ( isset($cache[$args['widget_id']]) ) {
echo $cache[$args['widget_id']];
return;
}
ob_start();
extract($args);
$title = apply_filters('widget_title', empty($instance['title']) ? __('Scheduled Posts') : $instance['title']); $browse = empty($instance['browse']) ? __('Browse Posts') : $instance['browse'];
?>
<?php echo $before_widget; ?>
<?php echo $before_title; ?><?php if ( $title ) echo $title; ?><?php echo $after_title; ?>
<div id="pc">
<?php get_post_calendar_html();?>
</div>
<?php echo $after_widget; ?>
<?php
$cache[$args['widget_id']] = ob_get_flush();
wp_cache_add('pc_widget', $cache, 'widget');
}
}
?>
Gljpartners.com this site has a interesting scrolling feature. for the images.. does anyone know how it's done? I have made myself an HTML Menu which is located on top of my current Flash object. I have a question whether it really is not possible to get the same effect as 'text' has on the original "Flash Menu" EX: www.moebelarkitekten.dk and get the same effect over at my new HTML menu (Coded with Jquery) EX: http://www.richyjassal.co.uk/moebelar/ Right now it is almost the same effect, but only: OnMouseOver align text to Right OnMouseOut text to align left A guide, or other? right now I almost have this script working the way I want it to, here it is: Code: var hash = window.location.hash.substr(1);
var href = $('.workimg a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #selected';
$('#selected').load(toLoad)
}
});
$('.workimg a').click(function(){
var toLoad = $(this).attr('href')+' #selected';
$('#selected').slideUp('slow',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href');
function loadContent() {
$('#selected').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#selected').slideDown('slow',hideLoader);
}
function hideLoader() {
$('#load').slideUp('slow');
}
return false;
});
How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are 1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect? 2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next? Hello, I posted this at another site, but am still at a loss so I hope I can get some help here I am at a complete loss with this plugin. And if after reading my post, someone can come up with a better, less frustrating plugin, I would really appreciate it. The plug-in author's site is: http://flesler.blogspot.com/2007/10/jqueryscrollto.html. The gist of it is that I am making a website for a restaurant. They want the menu to horizontally scroll between the sections of food, and within each section, have a vertically scrollable (via scroll bar) text menu in two columns. When you click on the section in the nav menu, it's supposed to take you to that food section via horizontal animated scroll. The link below is the sample page I'm testing on, and an image is attached to show you the idea of what it's supposed to look like: http://www.bqcreative.com/gcc2/menu.html That is the sample page with the JQuery.ScrollTo plugin installed. When I shrink the page, it looks like the animation *is* working (by the window scroll bars moving), just not correctly, since it's not moving the divs. Image of what each food section should look like: Maybe this is a case of me not having the divs set up correctly with CSS? I'm not sure, I've dug myself into a messy hole... please help HTML (with irrelevant code removed): Code: <div class="menunav">
<ul>
<li><a href="#" onclick="$.scrollTo('#appetizers', 1500, {easing:'elasout'}, {axis:'x'});">Appetizers</a></li>
<li><a href="#" onclick="$.scrollTo('#skinnygreek', 1500, {easing:'elasout'}, {axis:'x'});">Skinny Greek</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Wraps & Pitas</a></li>
<li><a href="#">Dinners</a></li>
<li><a href="#">Desserts</a></li>
</ul>
<br /><br /><br />
<hr />
</div>
<div class="menuwrap">
<div id="appetizers">
<div class="itemleft">
<p>Appetizer foods on the left</p>
</div>
<div class="itemright">
<p>Appetizer foods on the right</p>
</div>
</div>
<div id="skinnygreek">
<div class="itemleft">
<p>Skinny Greek foods on the left</p>
</div>
<div class="itemright">
<p>Skinny Greek foods on the right</p>
</div>
</div>
</div>
CSS: Code: .menunav {
width: 90%;
margin-top:35px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
.menunav ul {
list-style:none;
}
.menunav li {
display:block;
text-align:center;
float:left;
padding: 0 10px;
}
.menunav li a {
color: #2e6ab1;
text-decoration: none;
float:left;
font-family: 'DominicanRegular', sans-serif;
font-size:1.5em;
}
.menuwrap {
width: 721px;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
overflow-y:auto;
overflow-x:hidden;
position:relative;
}
#appetizers {
width: 721px;
float:left;
position:relative;
top:0px;
left:0px;
}
#skinnygreek {
width: 721px;
clear:left;
float:left;
position:relative;
top:0px;
left:800px;
}
.itemleft {
width:50%;
float:left;
}
.itemright {
width:50%;
float:right;
}
Javascript (in header section): Code: <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>
At the bottom of my document (pageA), I have an iframe like this: <iframe src="pageB.html#anchor" ... pageA opens with the iframe at position 0,0. <body onload="window.scrollTo(0,0)" ... works for FF but not for IE(8). How could this be fixed in IE? I have a menu on my site that is not working in IE. It works fine in Safari and Firefox, but it doesnt even open the link for the correspoding button. It just stays on the home page. Someone told me it was the google analytics, but I changed the menu portion of the code and added the gaq_push and the trackEvent, but it's still not working. Help guys, thanks.
Thank you in advance for your help with this. I have two pages. One page with thumbnails and another page with the actual gallery. On the gallery.html page I can scroll to my 5th image in the list by the following code: onclick="myScroll.scrollToPage(5,5)" I want to achieve this same effect from the index.html file into the gallery.html file. I have tried using anchored links like #image5, but that just messes up the page and the iscroll script I am working off of. Thank you again anyone who can help. Hi, I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum. What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma. I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page). Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated. Code: CSS
body {
background: black;
text-align: center;
vertical-align: middle;
}
div#bkg {
position: absolute;
text-align: center;
z-index: 1;
}
p#day1 {
position: absolute;
top: 800px;
left: 1000px;
font-weight: bold;
width: 50px;
background: white;
}
Javascript
function showVid(srcVid) {
// set the proper filename of the vid
srcVid = srcVid + ".ogv";
// create the video tag
var vidWin = document.createElement("video");
vidWin.id = "movie";
vidWin.setAttribute("width", "320");
vidWin.setAttribute("height", "240");
vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
var vpw = window.innerWidth;
var vph = window.innerHeight;
var xPosOff = window.pageXOffset;
var yPosOff = window.pageYOffset;
var leftNum = ((vpw/2) + xPosOff) - 160;
var topNum = ((vph/2) + yPosOff) - 120;
vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
var vidSrc = document.createElement("source");
vidSrc.src = "videos/" + srcVid;
vidSrc.type = "video/ogg";
vidSrc.codecs = "theora, vorbis";
vidWin.appendChild(vidSrc);
document.getElementById('bkg').style.opacity = 0.5;
document.body.appendChild(vidWin);
window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
// location.reload(false);
}
HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>
I have a basic function: function Notice() { var selectedCountry = CheckoutForm.elements["shipping-country"].selectedIndex; if (selectedCountry != 'United States') { alert('You are outside the US'); } } I have a select control with id "shipping-country": <select name="shippingCountry" id="shipping-country" > <option value="AF">Afghanistan</option> <option value="AL">Albania</option> ... </select> How can I trigger my function on selection change if I don't have access to html code or the server side code that generated the select control? typically I would just add onchange="Notice();" , but this option is out of the out of the question for the above reason. Any help would be appreciated. Hi. I'm working on a usability issue on a website. I have a jquery accordion slider, each slide has a link to a category. Now what happens is that when I go to the category page by clicking on a slider, when the page loads, the sliders always opens the first slide. For example, if I click on the third slide, I would like that slide to be open when the page loads. This is similar to the :current I believe. I think to solve what I need I must trigger a click on the third slide that third slide page opens. I know I need a reference for a condition, so I have ID'd my body through this php code were it gets the page name from the url into variable $page and then into do body's ID: PHP Code: <?php $page = $_SERVER['REQUEST_URI']; $page = str_replace("/","",$page); $page = str_replace(".php","",$page); $page = str_replace("?s=","",$page); $page = $page ? $page : 'default' ?> <body id="<?php echo $page ?>"> Now I've been trying through Javascript to get the variable from php and trigger a click on the slide of the category it is opening: PHP Code: <script type="text/javascript"> var bodyid = "<? $page ?>"; if (bodyid == "energy") { $("document").ready(function() { setTimeout(function() { $("ul#accordion li:second-child).trigger('click'); },10); }); } </script> This is not working and I don't really know what's wrong and how to solve or search for help. Does anyone understand what I'm trying to do here? Thank you. <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout()"> <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout();"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout()"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout();"> None of these works. Why not? How can i link this hotspot area with a javascript function? Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right. Here is the menu I'm using embedded in HTML: Code: <td width="40%" align="center"><font color="#000099"><b> <select id="Aircraft"> <option value="0">N148LH</option> <option value="1">N149LH</option> <option value="2">N150LH</option> <option value="3">N151LH</option> <option value="4">N152LH</option> <option value="5">N153LH</option> <option value="6">N155LH</option> <option value="7">N156LH</option> <option value="8">N157LH</option> <option value="9">N159LH</option> <option value="10">N162LH</option> <option value="11">N163LH</option> </select></b></font></td> Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working: Code:
var selectmenu=document.getElementById("Aircraft")
if (Aircraft=0) {
df.ew.value = 1569.41;
df.ew_mom.value = 135909.2;
}
if (Aircraft=1) {
df.ew.value = 1570.11;
df.ew_mom.value = 135929.76;
}
Any help is appreciated. If anyone is interested the page this is on is here. I am quite unexperienced in javascript (my only related experience is work with actionscript), so this problem is likely extremely simple. I am trying to alter a bit of code from a Firefox Jetpack extension (ClicktoFlash, if that helps) to suit my needs, and am having some trouble executing a time based event. The pertinent section of the extension's code is as follows: Code: placeHolder.click(function(eventObject){
$(this).replaceWith(jQuery.data( placeHolder, "myEmbed") );
});
The bit of code executed within the function is what I wish to maintain, but I want the code to instead be executed within a certain timeframe. My makeshift attempt to alter the code read like this: Code: var currentTime = new Date();
var hour = currentTime.getHours();
if((hour >= 2) && (hour < 7)){
$(this).replaceWith(jQuery.data( placeHolder, "myEmbed") );
};
This didn't work quite like I had hoped (though I think the code itself is solid), and I think under the circumstances I might need to replicate the placeHolder.click() segment while 7>hour>=2 for the code to execute properly; however, I am having quite a bit of trouble trying to do this. In short, is it possible to trigger a button press without the mouse ever clicking the button, or is there a glaringly apparent easier solution that I'm missing? Thanks in advance. Hello, I need your help. I basically need, when the enter button is pressed on the keyboard to trigger a button. Currently, my code works but it just refreshes the page and does not actually trigger the desired button: Code: //HERES MY CUSTOM BUTTON: <BUTTON TYPE="submit" onMouseOver="goLite(this.name)" onMouseOut="goDim(this.name)" onclick="javascript:v7_search()" CLASS="btn_std" NAME="btn_search" > ? Search </BUTTON> Here's the code to make the enter button work: Code: <form name="frmIMTS"
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btn_search').click();}};"
>
Any help with this is greatly appreciated. Cheers, J Hello, I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data. The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown. How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection? Here is the JS: Code: <script type="text/javascript">
function showCustomer(str)
{var xmlhttp;
if (str=="")
{document.getElementById("txtHint").innerHTML="";
return;}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();}
</script>
And the onchange line: Code: <SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)""> Etc... Please ignore the double sets of quotes. First, I will state that I am totally inexperienced in JavaScript. I have a web site application written in VB.net and asp. The main page uses JavaScript to load a popup page that performs multiple tasks. The main page accepts a variety of incoming messages, only SOME of which need to be passed to this popup page for processing. I found an ugly way to pass the message to the popup by placing it in a Session variable. Now I need to cause it to be handled. I see two possibilities, and I do not have a clue how to implement either. Either one would be great: 1. In the main page, trigger a subroutine in the popup, using JavaScript. OR 2. In the popup, establish a trigger any time that Session variable changes. Thanks in advance for any help on this. I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. |
|||||||