Client Login

Dev & Tech Notes

San Diego | Los Angeles | Big Bear | USA
Terms & Conditions     ©2005-2024 TJohns.co

Articles in this Category

Top Left Text cha

Web & App Development

Details
Category: jQuery
Hits: 7568

This is an example of how to check for duplicates across form fields using jQuery

jQuery.validator.addMethod("unique", function(value, element, params) {
var prefix = params;
var selector = jQuery.validator.format("[name!='{0}'][name^='{1}'][unique='{1}']", element.name, prefix);
var matches = new Array();
$(selector).each(function(index, item) {
if (value == $(item).val()) {
matches.push(item);
}
});

return matches.length == 0;
}, "Value is not unique.");

jQuery.validator.classRuleSettings.unique = {
unique: true
};
$("#myform").validate();

$("#validate").click(function() {
$("#myform").valid();
});
Add new comment
Comment (0) Hits: 7568

Details
Category: jQuery
Hits: 3526
Just a simple example of how to add or remove a class when you scroll the page.

 <script>

var $jQ = jQuery.noConflict();

          $jQ(window).scroll(function() {
            var scroll = $jQ(window).scrollTop();

            if (scroll >= 5) {
                $jQ(".topWrapper").addClass("topScroll");
            } else {
                $jQ(".topWrapper").removeClass("topScroll");
            }
        });

  </script>

 
If this does not work, check for a jQuery conflict by removing the first line:

var $jQ = jQuery.noConflict();

 

...and changing '$jQ' to 'jQuery' (without the quotes).

Add new comment
Comment (0) Hits: 3526

Details
Category: jQuery
Hits: 4798

HTML:

   <div class="drawerWrapper">
        <div class="topDrawer closed">
            <jdoc:include type="modules" name="drawer" />
            <div class="toggleOpen closed">
                <h4>Open/Close Control Panel</h4>
            </div>
        </div>
    </div>

jQuery:

<script>
        jQuery(document).on('click', '.toggleOpen.closed', function () {
            jQuery('.topDrawer').addClass('open').removeClass('closed');
            jQuery('.toggleOpen').addClass('open').removeClass('closed');
        });
        jQuery(document).on('click', '.toggleOpen.open', function() {
            jQuery('.topDrawer').addClass('closed').removeClass('open');
            jQuery('.toggleOpen').addClass('closed').removeClass('open');
        });
</script>

 

Add new comment
Comment (0) Hits: 4798

Details
Category: jQuery
Hits: 5405
Actually, I was thinking that would be simple. But, if I set a default image using CSS, it will always jump back to it when you move your mouse off the link. And I'm thinking you would want it to stay on whatever you rolled over last. I hate to yank you from one language to another, but I think jQuery is actually the best way to address this (along with CSS). And it's actually very simple... you can probably look at it and figure out what's going on. And it's not exactly the best practice, but you can put jQuery in an article I believe (otherwise you would put it in a module - positioned at the bottom of the page somewhere). Same with the CSS... it's not the best practice, but you can put it in the article between <style></style>.

Another note on jQuery... it's normally included in Joomla, but it will probably have conflicts... therefore you will need to load jQuery noConflict (actually, this is also usually included in Joomla). So if you have any conflicts, which you probably will, you'll need to add the first line:

var jQ = jQuery.noConflict(true);

And change all instances of the $ (dollar sign) to jQ

Here's the link again to what it does now: New Example

And the code:
I also threw it in jsFiddle so you can experiment with it if you want... JS Fiddle (but had to use colors instead of background images for it to work locally on jsfiddle)

<html>
<head>
    <style>
        .container>div {
            display:inline-block;
            vertical-align:top;
        }
        .container>#containerImage {
            width:400px;
            background-color: #9ea1ff;
            height:300px;
        }
        .container>.imageLinks {
            width: 300px;
            background: #0c86ff;
            height:300px;
        }
        .imageLinks>a {
            display: block;
            padding: 4px 8px;
            border: 1px solid #000;
            margin: 10px;
        }
        .container>.defaultImage {
            background:url('/images/default.jpg') no-repeat;
            background-size:cover;
        }
        .container>.showImage1 {
            background:url('/images/image1.jpg') no-repeat;
            background-size:cover;
        }
        .container>.showImage2 {
            background:url('/images/image2.jpg') no-repeat;
            background-size:cover;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div id="containerImage" class="defaultImage"></div>
    <div class="imageLinks">
        <a id="link1" href="/">First Link</a>
        <a id="link2" href="/">Second Link</a>
    </div>
</div>
<script>
    $("#link1").hover(
        function () {
            $('#containerImage').removeClass(); /* removes all existing classes first */
            $('#containerImage').addClass('showImage1'); /* and adds this new class */
        }

    );
    $("#link2").hover(
        function () {
            $('#containerImage').removeClass();
            $('#containerImage').addClass('showImage2');
        }
    );
</script>
</body>
</html>

 

1 comment
Comment (0) Hits: 5405

Details
Category: jQuery
Hits: 5504
This is what I use if I want to make it so the 'full image' in the image management part of an article scrolls slowly in the background.

To create an alternate template for the articles in a safe place (where it won't get overwritten with updates), create the following file: /templates/tjohnsj3/html/com_content/article/image-background.php

image-background.php should include the following:
<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

// Create shortcuts to some parameters.
$params  = $this->item->params;
$images  = json_decode($this->item->images);
$urls    = json_decode($this->item->urls);
$canEdit = $params->get('access-edit');
$user    = JFactory::getUser();
$info    = $params->get('info_block_position', 0);
JHtml::_('behavior.caption');
$useDefList = ($params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
    || $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author'));

?>
<div class="item-page<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="http://schema.org/Article">
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? JFactory::getConfig()->get('language') : $this->item->language; ?>" />
<?php if ($this->params->get('show_page_heading', 1)) : ?>
    <div class="page-header">
        <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
    </div>
<?php endif;
if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && $this->item->paginationrelative)
{
    echo $this->item->pagination;
}
?>
<?php if (!$useDefList && $this->print) : ?>
    <div id="pop-print" class="btn hidden-print">
        <?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
    </div>
    <div class="clearfix"> </div>
<?php endif; ?>
<?php if ($params->get('show_title') || $params->get('show_author')) : ?>
    <div class="page-header">

        <?php if ($this->item->state == 0) : ?>
            <span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
        <?php endif; ?>
        <?php if (strtotime($this->item->publish_up) > strtotime(JFactory::getDate())) : ?>
            <span class="label label-warning"><?php echo JText::_('JNOTPUBLISHEDYET'); ?></span>
        <?php endif; ?>
        <?php if ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != '0000-00-00 00:00:00') : ?>
            <span class="label label-warning"><?php echo JText::_('JEXPIRED'); ?></span>
        <?php endif; ?>
    </div>
<?php endif; ?>
<?php if (!$this->print) : ?>
    <?php if ($canEdit || $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
        <?php echo JLayoutHelper::render('joomla.content.icons', array('params' => $params, 'item' => $this->item, 'print' => false)); ?>
    <?php endif; ?>
<?php else : ?>
    <?php if ($useDefList) : ?>
        <div id="pop-print" class="btn hidden-print">
            <?php echo JHtml::_('icon.print_screen', $this->item, $params); ?>
        </div>
    <?php endif; ?>
<?php endif; ?>

<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
    <div class="article-info muted">
        <dl class="article-info">
            <dt class="article-info-term"><?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>

            <?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
                <dd class="createdby" itemprop="author" itemscope itemtype="http://schema.org/Person">
                    <?php $author = $this->item->created_by_alias ? $this->item->created_by_alias : $this->item->author; ?>
                    <?php $author = '<span itemprop="name">' . $author . '</span>'; ?>
                    <?php if (!empty($this->item->contact_link) && $params->get('link_author') == true) : ?>
                        <?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', JHtml::_('link', $this->item->contact_link, $author, array('itemprop' => 'url'))); ?>
                    <?php else: ?>
                        <?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
                    <?php endif; ?>
                </dd>
            <?php endif; ?>
            <?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
                <dd class="parent-category-name">
                    <?php $title = $this->escape($this->item->parent_title); ?>
                    <?php if ($params->get('link_parent_category') && !empty($this->item->parent_slug)) : ?>
                        <?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)) . '" itemprop="genre">' . $title . '</a>'; ?>
                        <?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
                    <?php else : ?>
                        <?php echo JText::sprintf('COM_CONTENT_PARENT', '<span itemprop="genre">' . $title . '</span>'); ?>
                    <?php endif; ?>
                </dd>
            <?php endif; ?>
            <?php if ($params->get('show_category')) : ?>
                <dd class="category-name">
                    <?php $title = $this->escape($this->item->category_title); ?>
                    <?php if ($params->get('link_category') && $this->item->catslug) : ?>
                        <?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug)) . '" itemprop="genre">' . $title . '</a>'; ?>
                        <?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
                    <?php else : ?>
                        <?php echo JText::sprintf('COM_CONTENT_CATEGORY', '<span itemprop="genre">' . $title . '</span>'); ?>
                    <?php endif; ?>
                </dd>
            <?php endif; ?>

            <?php if ($params->get('show_publish_date')) : ?>
                <dd class="published">
                    <span class="icon-calendar"></span>
                    <time datetime="<?php echo JHtml::_('date', $this->item->publish_up, 'c'); ?>" itemprop="datePublished">
                        <?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
                    </time>
                </dd>
            <?php endif; ?>

            <?php if ($info == 0) : ?>
                <?php if ($params->get('show_modify_date')) : ?>
                    <dd class="modified">
                        <span class="icon-calendar"></span>
                        <time datetime="<?php echo JHtml::_('date', $this->item->modified, 'c'); ?>" itemprop="dateModified">
                            <?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
                        </time>
                    </dd>
                <?php endif; ?>
                <?php if ($params->get('show_create_date')) : ?>
                    <dd class="create">
                        <span class="icon-calendar"></span>
                        <time datetime="<?php echo JHtml::_('date', $this->item->created, 'c'); ?>" itemprop="dateCreated">
                            <?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
                        </time>
                    </dd>
                <?php endif; ?>

                <?php if ($params->get('show_hits')) : ?>
                    <dd class="hits">
                        <span class="icon-eye-open"></span>
                        <meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
                        <?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
                    </dd>
                <?php endif; ?>
            <?php endif; ?>
        </dl>
    </div>
<?php endif; ?>

<?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
    <?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>

    <?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
<?php endif; ?>

<?php if (!$params->get('show_intro')) : echo $this->item->event->afterDisplayTitle; endif; ?>
<?php echo $this->item->event->beforeDisplayContent; ?>

<?php if (isset($urls) && ((!empty($urls->urls_position) && ($urls->urls_position == '0')) || ($params->get('urls_position') == '0' && empty($urls->urls_position)))
    || (empty($urls->urls_position) && (!$params->get('urls_position')))) : ?>
    <?php echo $this->loadTemplate('links'); ?>
<?php endif; ?>
<?php if ($params->get('access-view')):?>
    <?php if (isset($images->image_fulltext) && !empty($images->image_fulltext)) : ?>
        <?php $imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext; ?>
        <div class="articleBackground parallax" data-velocity="-.1" id="slowScroll" style="background-image: url('/<?php echo htmlspecialchars($images->image_fulltext); ?>');">
        </div>
    <?php endif; ?>
    <?php
    if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && !$this->item->paginationrelative):
        echo $this->item->pagination;
    endif;
    ?>
    <?php if (isset ($this->item->toc)) :
        echo $this->item->toc;
    endif; ?>
    <div itemprop="articleBody" class="contentArea" id="normalScroll">
        <h1 itemprop="name">
            <?php if ($params->get('show_title')) : ?>
                <?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
                    <a href="/<?php echo $this->item->readmore_link; ?>" itemprop="url"> <?php echo $this->escape($this->item->title); ?></a>
                <?php else : ?>
                    <?php echo $this->escape($this->item->title); ?>
                <?php endif; ?>
            <?php endif; ?>
        </h1>
        <?php echo $this->item->text; ?>
    </div>

    <?php if ($useDefList && ($info == 1 || $info == 2)) : ?>
        <div class="article-info muted">
            <dl class="article-info">
                <dt class="article-info-term"><?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>

                <?php if ($info == 1) : ?>
                    <?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
                        <dd class="createdby" itemprop="author" itemscope itemtype="http://schema.org/Person">
                            <?php $author = $this->item->created_by_alias ? $this->item->created_by_alias : $this->item->author; ?>
                            <?php $author = '<span itemprop="name">' . $author . '</span>'; ?>
                            <?php if (!empty($this->item->contact_link) && $params->get('link_author') == true) : ?>
                                <?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', JHtml::_('link', $this->item->contact_link, $author, array('itemprop' => 'url'))); ?>
                            <?php else: ?>
                                <?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
                            <?php endif; ?>
                        </dd>
                    <?php endif; ?>
                    <?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
                        <dd class="parent-category-name">
                            <?php $title = $this->escape($this->item->parent_title); ?>
                            <?php if ($params->get('link_parent_category') && $this->item->parent_slug) : ?>
                                <?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)) . '" itemprop="genre">' . $title . '</a>'; ?>
                                <?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
                            <?php else : ?>
                                <?php echo JText::sprintf('COM_CONTENT_PARENT', '<span itemprop="genre">' . $title . '</span>'); ?>
                            <?php endif; ?>
                        </dd>
                    <?php endif; ?>
                    <?php if ($params->get('show_category')) : ?>
                        <dd class="category-name">
                            <?php $title = $this->escape($this->item->category_title); ?>
                            <?php if ($params->get('link_category') && $this->item->catslug) : ?>
                                <?php $url = '<a href="' . JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug)) . '" itemprop="genre">' . $title . '</a>'; ?>
                                <?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
                            <?php else : ?>
                                <?php echo JText::sprintf('COM_CONTENT_CATEGORY', '<span itemprop="genre">' . $title . '</span>'); ?>
                            <?php endif; ?>
                        </dd>
                    <?php endif; ?>
                    <?php if ($params->get('show_publish_date')) : ?>
                        <dd class="published">
                            <span class="icon-calendar"></span>
                            <time datetime="<?php echo JHtml::_('date', $this->item->publish_up, 'c'); ?>" itemprop="datePublished">
                                <?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
                            </time>
                        </dd>
                    <?php endif; ?>
                <?php endif; ?>

                <?php if ($params->get('show_create_date')) : ?>
                    <dd class="create">
                        <span class="icon-calendar"></span>
                        <time datetime="<?php echo JHtml::_('date', $this->item->created, 'c'); ?>" itemprop="dateCreated">
                            <?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC3'))); ?>
                        </time>
                    </dd>
                <?php endif; ?>
                <?php if ($params->get('show_modify_date')) : ?>
                    <dd class="modified">
                        <span class="icon-calendar"></span>
                        <time datetime="<?php echo JHtml::_('date', $this->item->modified, 'c'); ?>" itemprop="dateModified">
                            <?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC3'))); ?>
                        </time>
                    </dd>
                <?php endif; ?>
                <?php if ($params->get('show_hits')) : ?>
                    <dd class="hits">
                        <span class="icon-eye-open"></span>
                        <meta itemprop="interactionCount" content="UserPageVisits:<?php echo $this->item->hits; ?>" />
                        <?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
                    </dd>
                <?php endif; ?>
            </dl>
            <?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
                <?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
                <?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
            <?php endif; ?>
        </div>
    <?php endif; ?>

    <?php
    if (!empty($this->item->pagination) && $this->item->pagination && $this->item->paginationposition && !$this->item->paginationrelative):
        echo $this->item->pagination;
        ?>
    <?php endif; ?>
    <?php if (isset($urls) && ((!empty($urls->urls_position) && ($urls->urls_position == '1')) || ($params->get('urls_position') == '1'))) : ?>
        <?php echo $this->loadTemplate('links'); ?>
    <?php endif; ?>
    <?php // Optional teaser intro text for guests ?>
<?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
    <?php echo $this->item->introtext; ?>
    <?php //Optional link to let them register to see the whole article. ?>
    <?php if ($params->get('show_readmore') && $this->item->fulltext != null) :
        $link1 = JRoute::_('index.php?option=com_users&view=login');
        $link = new JUri($link1);?>
        <p class="readmore">
            <a href="/<?php echo $link; ?>">
                <?php $attribs = json_decode($this->item->attribs); ?>
                <?php
                if ($attribs->alternative_readmore == null) :
                    echo JText::_('COM_CONTENT_REGISTER_TO_READ_MORE');
                elseif ($readmore = $this->item->alternative_readmore) :
                    echo $readmore;
                    if ($params->get('show_readmore_title', 0) != 0) :
                        echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
                    endif;
                elseif ($params->get('show_readmore_title', 0) == 0) :
                    echo JText::sprintf('COM_CONTENT_READ_MORE_TITLE');
                else :
                    echo JText::_('COM_CONTENT_READ_MORE');
                    echo JHtml::_('string.truncate', ($this->item->title), $params->get('readmore_limit'));
                endif; ?>
            </a>
        </p>
    <?php endif; ?>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && $this->item->paginationposition && $this->item->paginationrelative) :
    echo $this->item->pagination;
    ?>
<?php endif; ?>
<?php echo $this->item->event->afterDisplayContent; ?> </div>

 
You also want to create the following in the home root of the website: /includes/scrolly

Download this zip file, unzip, and copy the files into the scrolly folder that you just created on the server.  It includes a working example at /scrolly/example.

Create a custom HTML module and paste the Javascript below into it.  This was modified from the original version of the plugin to include noConflict mode.  Otherwise, some parts of the front end administration don't work like the modals for inserting images.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="/includes/scrolly/jquery.scrolly.js"></script>
<script>
var jQ = jQuery.noConflict(true);
jQ(document).ready(function(){
  jQ('.parallax').scrolly();
});
</script>

 Then, in your article options, select the alternative layout, 'image-background'.  Now any image that you insert into the 'Full Article Image' under the tab, 'Images & Links', will appear as the page background and scroll slowly instead of the same speed as the content.

Add new comment
Comment (0) Hits: 5504

Details
Category: jQuery
Hits: 2204
Just an example of how to use jQuery noconflict...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="/includes/scrolly/jquery.scrolly.js"></script>
<script>
var jQ = jQuery.noConflict(true);
jQ(document).ready(function(){
  jQ('.parallax').scrolly();
});
</script>

 I have found that using noConflict(true) is necessary much of the time... as opposed to just noConflict().

Add new comment
Comment (0) Hits: 2204

Details
Category: jQuery
Hits: 5354
Include jQuery if it's not already.

This will remove the class when you scroll back up.  Change '100' to whatever you want the scroll value to be.

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $(".initialStyle").addClass("additionalStyle");
            } else {
                $(".initialStyle").removeClass("additionalStyle");
            }
        });

 Replace 'initialStyle' and 'additionalStyle'.

Here's a full page example:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        div {
            height:100px;
        }
        .test {
            background:#0000ff;
        }
        .test2 {
            background:#ff0000;
        }
        .test3 {
            background:#00ff00;
        }
        .testicles {
            background:#000000;
        }
    </style>

    <script>
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $(".test2").addClass("testicles");
            } else {
                $(".test2").removeClass("testicles");
            }
        });
    </script>
</head>
<body style="height:2000px;margin-top:200px;">

<div class="test" id="test">
    </div>
<div class="test2" id="test2">
</div>
<div class="test3" id="test3">
</div>
<div class="test4" id="test4">
</div>
</body>

 

Add new comment
Comment (0) Hits: 5354

Details
Category: jQuery
Hits: 2066
I don't care what I hear about putting jQuery right before the </body> tag.  That DOES NOT WORK.  I've found that it only works if I put it in the <head> section.
Add new comment
Comment (0) Hits: 2066

Details
Category: jQuery
Hits: 3370
Using JQuery and CSS you can easily produce a fade effect on an entire web page or just one element.
 
Download the JQuery library and upload to the site at /js folder.
Call the library to the page with <script type="text/javascript" src="/js/jquery.min.js"></script>
Add in <head> section of page: <script type="text/javascript">
$(document).ready(function() 
{
// fade in content.
$( '.header' ).fadeIn(2500);
});
</script>
 
<style type="text/css">
.header
{
display:none;
}
</style>
 
Replace <div>s with 
<script type="text/javascript">
<!--
document.write( '<div class="header">' );
</script>
and
<script type="text/javascript">
<!--
document.write( '</div><!-- content-wrapper -->' );
</script>
 
If only wanted on the index page [for example], put
<script type="text/javascript">
$(document).ready(function() 
{
// fade in content.
$( '.header' ).fadeIn(2500);
});
</script>
 
<style type="text/css">
.header
{
display:none;
}
</style>
 
in /includes/fade.php and call it using the PHP code:
<? if ($_SERVER['PHP_SELF']=="/index.php")
{include 'includes/fade.php';}
?>
 
Add new comment
Comment (0) Hits: 3370

Dev Notes

X