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"
>
Related
In a facebook-esque fasion, I'm working in a post with comments. The comments have a int which indicates the id of the parent post. So Comment 1 and 2 both have assigned as parent Post 1.
What im working on is on displaying them as a grid within a grid. Here is that part in .zul:
<grid id="postGrid" height="550px" model="#load(vm.pcdata.posts)" emptyMessage="No Posts.">
<template name="model">
<row>
<window border="normal">
<!-- .................. -->
<!-- PARENT POST -->
<!-- .................. -->
<caption id="userPost" label="#load(each.user)"/>
<textbox id="infoPost" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addPLike', postid=each.postid)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="#load(each.plikes)"/>
</div>
</hlayout>
<separator bar="false"/>
<window border="normal">
<!-- .................. -->
<!-- THE SECOND GRID-->
<!-- .................. -->
<grid id="commentGrid" height="150px" model="#load(vm.pcdata.comments)" emptyMessage="No Comments.">
<template name="model">
<row>
<window border="normal">
<caption id="userComment" label="#load(each.user)"/>
<textbox id="infoComment" readonly="true" value="#load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
<separator bar="true"/>
<hlayout>
<div>
<button label="Like" onClick="#command('addCLike', commentid=each.commentid)"/>
</div>
<div hflex="true">
<textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="#load(each.clikes)"/>
</div>
</hlayout></window></row></template></grid></window></window></row></template></grid>
In the second grid, I imagine there could be some sort of if function in which if both the postid in the father Post and the postsrc in the child Comment are the same, the comment will be displayed. Is there any way to make this work?
You can use shadow element <if>, e.g.
<if test="#load(vm.yourFlag)">
<grid id="commentGrid">
....
</if>
please see http://books.zkoss.org/zk-mvvm-book/8.0/shadow_elements/flow_control.html
Do you mean commentGrid is created but inner window is hidden, so there is space inside commentGrid, right?
Since you specify emptyMessage on commentGrid, it should show no comments. Or there are still comments but all hidden? If so, you can consider hide both commentGrid with inner window.
I have template like here:
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
i add menu navigation:
<h:form id="form">
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/pages/template/header.xhtml" />
</ui:insert>
<f:ajax render="ContentLoader">
<h:commandLink actionListener="#{contentPage.setPage('/pages/first.xhtml')}" value="About Us" />
<h:commandLink actionListener="#{contentPage.setPage('/pages/login.xhtml')}" value="Contact Us" />
</f:ajax>
</div>
<h:panelGroup id="ContentLoader" >
<div id="content">
<ui:insert name="content" >
<ui:include src="#{contentPage.page}" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:form>
links are working fine, but i have problem with redirect content by useing <h:commandButton action="link"> which is in content
how can i fix this problem?
maybe it's something wrong with my layout?
or how to correctly redirect from content to another content, useing buttons which are in contents?
As to your concrete problem, it's likely caused by the combination <ui:include src="#{...}"> and a view scoped bean. This construct works only if you upgrade to at least Mojarra 2.1.18. Otherwise, the view scoped bean will fail to restore and be newly recreated and therefore the default value of #{contentPage.page} will be considered when any form actions inside the page are to be decoded. Upgrading to at least Mojarra 2.1.18 should fix your problem. You can get it at http://javaserverfaces.java.net. It's currently already at 2.1.25.
As to your concrete functional requirement, using command links/buttons for plain page-to-page navigation is a poor practice. You should be using output links/buttons for this.
<h:button value="navigate" outcome="link" />
or
<h:link value="navigate" outcome="link" />
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..
I am adding a class value to sc:image but when it renders it doesnt show up correct. Here how it looks like in HTML without render:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" class="logo" />
</a>
But when it renders to the webpage it shows up like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34">
</a>
However, I want to accomplish something like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34" class="logo">
</a>
How should I approach this problem?
One way to apply a class to the image would be to place the CSS class at a higher block level that is not a web control, perhaps on a wrapping DIV. This might allow you to leverage styling across the whole block and not just the image itself.
To apply the class directly to the IMG tag, you should use the CssClass property of the Image control so that it will render out as a "class" tag:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" CssClass="logo" />
</a>
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