Top Left Text cha

Website Development Services

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();
});
Comment (0) Hits: 39
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).

Comment (0) Hits: 1011

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>

 

Comment (0) Hits: 732
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>

 

Comment (0) Hits: 2113
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.

Comment (0) Hits: 2153
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().

Comment (0) Hits: 684
X