I have two jQuery Cycles Version 2. http://jquery.malsup.com/cycle2/
I want to have one navigation (#nav) to control both of the cycles. I know it is still BETA, so maybe it isn't possible yet..
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.scrollVert.js"></script>
<div class="cycle-slideshow"
data-cycle-fx="scrollVert"
data-cycle-pause-on-hover="true"
data-cycle-timeout="0"
data-cycle-pager="#nav">
<img src="http://i46.tinypic.com/29oocgm.jpg" data-cycle-pager-template="<a href=#>1</a>" />
<img src="http://i48.tinypic.com/o602sz.jpg" data-cycle-pager-template="<a href=#>2</a>" />
<img src="http://i50.tinypic.com/qntoxc.jpg" data-cycle-pager-template="<a href=#>3</a>" />
</div>
<br />
<br />
<div class="cycle-slideshow"
data-cycle-fx="scrollVert"
data-cycle-pause-on-hover="true"
data-cycle-timeout="0"
data-cycle-pager="#nav">
<img src="http://i46.tinypic.com/29oocgm.jpg" data-cycle-pager-template="<a href=#>1</a>" />
<img src="http://i48.tinypic.com/o602sz.jpg" data-cycle-pager-template="<a href=#>2</a>" />
<img src="http://i50.tinypic.com/qntoxc.jpg" data-cycle-pager-template="<a href=#>3</a>" />
</div>
<div id="nav"></div>
Example: http://jsfiddle.net/hfjXd/
Iøm not sure I understand exctly what you mean but if you just use:
data-cycle-prev=".prev"
data-cycle-next=".next"
on both of the Cycles it should just do it.
check this example: view-source:http://jquery.malsup.com/cycle2/demo/caro-pager.php
and this one: http://jquery.malsup.com/cycle2/demo/prevnext.php
Related
I have this img slideshow that changes when I click.
I would like no effects when the image change, like it used to be in the old jquery-cycle, but instead I get a strange effect of 2 images overlapping each others until the second one finally appear and the first then disappear.
<div class="imgCyclerBody">
<div><img class="sortArrow" src="~/Content/imgs/arrow-left.png" alt="left"/></div>
<div id="slideshow" class="cycle-slideshow" data-cycle-fx="none" data-cycle-hide-non-active="true" data-cycle-prev=".prev" data-cycle-next=".next">
<img alt="Item" src="~/Content/imgs/image1.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/image2.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/image3.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/image4.png" width="30" height="30" />
<img alt="Item" src="~/Content/imgs/Pixels.png" width="30" height="30" />
</div>
<div><img class="sortArrow" src="~/Content/imgs/arrow-right.png" alt="right"/></div>
</div>
Does anybody knows how to avoid this problem?
I moved from the old jquery-cycle to the new one becaue I had a problem with my DIVs format when I used fx: 'none'.
Thanks
Have you tried using the easing plugin?
This doesn't appear to be having an issue on my fiddle.
<div class="cycle-slideshow"
data-cycle-slides="li"
data-cycle-fx='none'
data-cycle-speed='700'
data-cycle-timeout='7000'
data-cycle-pause-on-hover="true"
data-cycle-prev=".prev"
data-cycle-next=".next"
data-cycle-easing="easeOutBack"
>
I'm making a custom joomla template. Everytime i try installing it from the back-end, it uploads but doesn't install. I have checked all the directory listings and stuff but can't seem to find what the problem is.
Here is my templatedetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">
<name></name>
<creationDate></creationDate>
<author></author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<copyright>Copyright (C)</copyright>
<version>2.0</version>
<description></description>
<files>
<folder>css</folder>
<folder>images</folder>
<folder>js</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>message</position>
<position>search</position>
<position>logo</position>
<position>menu</position>
<position>image slider</position>
<position>left menu</position>
<position>right menu</position>
<position>twitter</position>
<position>aboutA</position>
<position>aboutB</position>
<position>aboutC</position>
<position>info</position>
<position>footer</position>
<position>banner</position>
<position>Small-banner</position>
<position>facebook</position>
<position>contact-form</position>
<position>banner-third</position>
</positions>
</extension>
The name and details are all in the zip file.
and here's my index.php
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<body>
<div class="container">
<div class="row">
<h1><img src="images/logo1.png" alt="South Georgian Bay Community Health Center. Every One Matters"/></h1>
</div>
<div class="row">
<section class="sixteen columns">
<jdoc:include type="modules" name="mainmenu" style="xhtml"/>
</section>
</div>
<section class="sixteen columns">
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" alt=" " />
<img src="images/image-slider-2.jpg" alt=" " />
<img src="images/image-slider-3.jpg" alt=" " />
<img src="images/image-slider-4.jpg" alt=" " />
<img src="images/image-slider-5.jpg" alt=" "/>
<jdoc:include type="modules" name="slideshow" style="xhtml"/>
</div>
</div>
</section>
</div>
<div class="row">
<section="sixteen columns"><p></p></section>
<section="seven columns"><p></p></section>
</div>
<div class="row">
<section class="twelve columns">
<jdoc:include type="message" />
<jdoc:include type="component" style="xhtml"/>
</section>
<section class="four columns ">
<jdoc:include type="modules" name="twitter" style="xhtml"/>
</section>
</div>
<div class="row">
<section class="five columns">
<jdoc:include type="modules" name="aboutA" style="xhtml"/>
</section>
<section class="five columns">
<jdoc:include type="modules" name="aboutB" style="xhtml"/>
</section>
<section class="five columns">
<jdoc:include type="modules" name="aboutC" style="xhtml"/>
</section>
</div>
<div class="row">
<section class="sixteen columns">
<jdoc:include type="modules" name="footer" style="xhtml"/>
</section>
</div>
</div>
it isn't showing my head section properly for some reason. I am using a grid for the layout.
Could anyone help me out because i've been trying for a while now and can't find a way around.
Please validate your xml.
Change:
section="sixteen columns"
to
section class="sixteen columns"...
regardless if you are using a grid framework or not it always comes down to the URL or href= to you linking to your stylesheets and images directly within the index.php file. This just happened to me 5 minutes ago and it happens to me all the time and I never turn around and look at the big picture.
First of all I don't know why but I think for some odd reason you should or must include a <filename>index.html</filename> blank file.
next
you also need a favicon.ico in your templatedetails and an actual favicon.ico in your root of the template. I do believe this is mandatory or breaks a template or causes an upload directly from install under joomla to malfunction!
The problem that I had is even though my stylesheets seem to be getting called, they really are not being called so what I did and what I will always do in the future when building joomla templates is to replace this in all my references to files in the head or elsewhere.
Lets say you have href="css/bootstrap.min.css" or something. add this
<?php echo $this->baseurl ?>
/templates/
<?php echo $this->template ?>/
to make it
href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.min.css"
if nothing else worked this will and it's a good practice too.
you also cannot! Cannot forget this towards the beginning of your tag <jdoc:include type="head" />
You didn't show all your index.php so I could not tell..
Like in the title, is there any lib like PrimeFaces or RichFaces that is template-oriented?
I'm building my own including some fixed/liquid/elastic base layouts but I wonder if someone out there has already done this boring work.
UPDATE
i'm sorry, i haven't explained myself.
i'm talking about a sort of framework on framework made by a tree of templates (and optionally beans).
i'm currently using this root template, that is bundled in a jar file with some bean and , entity, for all my applications:
<!DOCTYPE html>
<html lang="#{localeBean.locale.language}"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:s="http://shapeitalia.com/jsf2"
xmlns:sc="http://java.sun.com/jsf/composite/shape">
<f:view locale="#{localeBean.locale}">
<h:head>
<title><ui:insert name="module"/> - <ui:insert name="title"/></title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['shape/favicon/shape.ico']}" />
<h:outputStylesheet library="shape" name="css/core.css" />
<h:outputStylesheet library="shape" name="css/fileicons.css" />
<h:outputScript library="shape" name="js/jquery.jsPlumb-1.3.15-all.js" />
<h:outputScript library="shape" name="js/core.js" />
</h:head>
<h:body>
<ui:debug hotkey="x" />
<p:growl id="messages" globalOnly="false" autoUpdate="true" showDetail="true" showSummary="true" />
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="loading..." resizable="false" closable="false">
<h:graphicImage library="shape" name="images/ajaxloadingbar.gif" />
</p:dialog>
<div>
<ui:insert name="header">
<h:form>
<s:panelGrid cellStyle="border: 0;">
<s:column style="text-align: left;">
<p:commandLink action="index" >
<h:graphicImage library="shape" name="images/shape.png" height="30px" style="vertical-align: middle; float: left; border: 0"/>
</p:commandLink>
</s:column>
<s:column style="text-align: right;">
<p:menuButton rendered="#{not empty request.userPrincipal}" value="#{request.userPrincipal.name}" style="float: right">
<p:menuitem actionListener="#{sessionBean.logout}" action="index" ajax="false" icon="ui-icon-power" value="#{bundle.logout}"/>
</p:menuButton>
</s:column>
</s:panelGrid>
</h:form>
</ui:insert>
</div>
<h:panelGroup rendered="#{not empty request.userPrincipal}">
<ui:insert name="content">insert content here</ui:insert>
</h:panelGroup>
<h:panelGroup rendered="#{empty request.userPrincipal}">
<h:form>
<p:panel header="login">
<h:panelGrid columns="3">
<h:outputLabel for="login_email" value="Email:" />
<h:outputLabel for="login_password" value="Password:" />
<h:panelGroup />
<p:inputText id="login_email" value="#{requestScope.email}" label="email" size="32"/>
<p:password id="login_password" value="#{requestScope.password}" label="password" feedback="false" size="32"/>
<p:commandButton value="Login" action="#{sessionBean.login}" icon="ui-icon ui-icon-check" ajax="false"/>
<p:message for="login_email" />
<p:message for="login_password" />
<h:panelGroup />
</h:panelGrid>
</p:panel>
</h:form>
</h:panelGroup>
<ui:insert name="external" />
</h:body>
</f:view>
</html>
and this is only the root one.
i'd like to know if is there someone who has already done a work like this and have bundled it
ok there is no such a thing.
the best out there are components like p:layout.
I have an RSS feed being pulled through XSLT on an .xsl file. I have a "Show" Link that when clicked displays a hidden DIV with an Iframe that has the source of the unique RSS Item's full page.
The issue is since this DIV is hidden it actually loads all the iframe's source pages when the page is first viewed and boggs down the loading time considerably.
What i want to do is only have the iframe load the source after the "Show" button is clicked. How can i invoke this with an XSLT If Statement?
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:user="urn:my-extension-lib:date">
<xsl:template match="/">
<xsl:for-each select="rss/channel/item">
<div style="margin-bottom: 30px;">
<div style="margin: 5px;">
<div style="font-weight: bold;">
<a href="{link}" target="_blank" style="font-size: 10pt;">
<xsl:value-of select="title" />
</a>
</div>
<div>
<xsl:value-of select="user:GetFormattedDate(pubDate,'MMM d, yyyy hh:mm tt')" />
</div>
</div>
<div style="padding-left:30px">
Show
</div>
<div style="margin: 20px 20px 20px 40px;display:none" id="{guid}">
<iframe width="685" height="400" scrolling="yes" frameborder="yes" src="{link}"></iframe>
</div>
</div>
</xsl:for-each>
</xsl:template>
What I think you need to do is initially load a 'blank' page for each IFRAME. For example, a page called blank.htm, that is empty. Also, you may want to give each IFRAME an ID tag, so you can easily access it with Javascript to change the source
<iframe id="iframe{guid}" width="685" height="400" scrolling="yes" frameborder="yes" src="blank.htm"/>
Then, you can code your javascript like so, to show the DIV, and change the source of the IFRAME to the correct page.
function test(id, link)
{
document.getElementById(id).style.display = 'block';
document.getElementById("iframe" + id).src = link;
}
Here's an example of the whole stylesheet for you
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Test</title>
<script>
function test(id, link)
{
document.getElementById(id).style.display = 'block';
document.getElementById("iframe" + id).src = link;
}
</script>
</head>
<body>
<xsl:for-each select="rss/channel/item">
<div style="margin-bottom: 30px;">
<div style="margin: 5px;">
<div style="font-weight: bold;">
<a href="{link}" target="_blank" style="font-size: 10pt;">
<xsl:value-of select="title"/>
</a>
</div>
<div>
<xsl:value-of select="pubDate"/>
</div>
</div>
<div style="padding-left:30px">
Show
</div>
<div style="margin: 20px 20px 20px 40px;display:none" id="{guid}">
<iframe id="iframe{guid}" width="685" height="400" scrolling="yes" frameborder="yes" src="blank.htm"/>
</div>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Hey, any ideas why this wont work, when i click on the input fields, nothing happens. Here is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker();
});
</script>
This my form:
<form id="form1" name="form1" method="post" action="chart.php">
<ul id="add_form">
<li><label>Date from</label>
<input type="text" name="date1" class="date-pick" /></li>
<li><label>Date to</label>
<input type="text" name="date2" class="date-pick" value="<?php echo date("Y-m-d") ?>" /></li>
<li><label>Display</label>
<select name="type">
<option value="1">User Joins</option>
<option value="2">Messages sent</option>
<option value="3">Optin/outs</option>
</select>
</li>
</ul>
<br clear="all" /><br />
<input type="image" src="images/show.jpg" border="0" alt="Submit Form" class="login" />
</form>
I think you want a lowercase p.
$('.date-pick').datepicker();
To me it seems that you want...
$('.date-pick').datepick();
But I'm looking at the 3.7.4 version of Datepicker (freshly downloaded from the jQuery site). Based on your element that imports the Datepicker plugin, I'm not sure we're looking at the same version.
My example works for me using your markup.
Are you including jQuery.ui.core js file?
Are you including the DatePicker CSS files (ui.core.css and ui.datepicker.css)? Sometimes it works but you can't see it the way it should look because there are no styles in place.