ey there. i have a <a href><img></a> that has been added with a jquery effect. that is pulled out in a macro for each button unfortunately this effect only shows on one button and not all the buttons.
im very new at jquery / xsl / umbraco so im alittle lost to why this is happening. this is the foreach macro.
My guess would be because you are targeting the ID of the image in JQuery, and I don't think it likes having multiple elements with the same ID. One thought might be to change it to a class instead, and target that class in the JQuery.
Maybe you should start by not giving all of your images the same id. I think that this can be a showstopper for you. In your jQuery, you could instead of finding the ID, find the elements by their class-name. This means replacing the #imgjq with .ExcommKnap in the jQuery part.
I'm not totally sure that this will work, but anyway it's bad practice to give the same id to more than one element.
But does the effect work on the first button, or on a random one?
hmm writting in the .excommknap it adds the jquery effect to -EVERY- single one of them so if i hover the mouse over one picture every single one of them fades out.
I am trying now to make each picture be given a id based on the page. but this gives me a new problem as i cant place a Umbraco Item inside
thanx a bunch that did it kim . - i have a new problem regarding a link that is active now. that i thought i could solve with CSS - ill make a new post about it.
Javascript on for each loop macro only runs once.
ey there. i have a <a href><img></a> that has been added with a jquery effect. that is pulled out in a macro for each button unfortunately this effect only shows on one button and not all the buttons.
im very new at jquery / xsl / umbraco so im alittle lost to why this is happening. this is the foreach macro.
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">
<xsl:if test="data[@alias='excommknap'] != ''">
<xsl:variable name="media" select="umbraco.library:GetMedia(number(data[@alias='excommknap']), 0)" />
<xsl:if test="count($media/data[@alias='umbracoFile']) > 0">
<a href="{umbraco.library:NiceUrl(@id)}" class="opacityit">
<img id="imgjq" class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}"
/>
</a>
</xsl:if>
</xsl:if>
</xsl:for-each>
<script type="text/javascript">
<![CDATA[
$("#imgjq").mouseover(function () { $("#imgjq").fadeTo('slow', 0.2, function(){}) });
$("#imgjq").mouseout(function () { $("#imgjq").fadeTo('slow', 1.0, function(){}) });
]]>
</script>
any help would be greatly be appreciated
Hi Jan,
My guess would be because you are targeting the ID of the image in JQuery, and I don't think it likes having multiple elements with the same ID. One thought might be to change it to a class instead, and target that class in the JQuery.
ie:
<img class="imgjq" ...
$(".imgjq").mouseover......
(I think)
-Tom
Hi Jan
Maybe you should start by not giving all of your images the same id. I think that this can be a showstopper for you. In your jQuery, you could instead of finding the ID, find the elements by their class-name. This means replacing the #imgjq with .ExcommKnap in the jQuery part.
I'm not totally sure that this will work, but anyway it's bad practice to give the same id to more than one element.
But does the effect work on the first button, or on a random one?
/Kim A
first button - ill try to fiddle some more with it.
hmm writting in the .excommknap it adds the jquery effect to -EVERY- single one of them so if i hover the mouse over one picture every single one of them fades out.
I am trying now to make each picture be given a id based on the page. but this gives me a new problem as i cant place a Umbraco Item inside
<img id="<xsl:value-of select="@nodeName"/>" class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}" />
how could this be done ?
or something similar to give each pulled out picture a ID of its own -
at the same time i would also have to run the javascript through in the foreach loop with the similiar umbraco item to replace the #imgjq
though this will properly make for a very bad html :(
Jan, you could give the images a unique id with something like this:
<img class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}"><xsl:attribute name="class"><xsl:value-of select="concat('imgjq',position())"/></xsl:attribute>
</img>
This would give each image an id of "imgjq1", "imgjq2", "imgjq3" etc.
Otherwise you could try to change your jQuery to something like this:
$("#imgjq").mouseover(function () {$(this).fadeTo('slow', 0.2, function(){})
});
$("#imgjq").mouseout(function () {
$(this).fadeTo('slow', 1.0, function(){})
});
When using $(this) inside your mouseover/mouseout event, the "animation" will only effect the button hat is hovered.
/Kim A
Ahh sorry, the jQuery should of course not get the id, but the class, as I mentioned in my first answer:
$(".ExcommKnap").mouseover(function () {$(this).fadeTo('slow', 0.2, function(){})
});
$(".ExcommKnap").mouseout(function () {
$(this).fadeTo('slow', 1.0, function(){})
});
Hope this works :)
/Kim A
thanx a bunch that did it kim . - i have a new problem regarding a link that is active now. that i thought i could solve with CSS - ill make a new post about it.
Any time Jan.
Glad I could help.
/Kim A
is working on a reply...