My problem is im terrible at jquery and fairly new to umbraco and need to add that when i hover over the "ExcommKnap" with my mouse it also shows the headlinebox for that perticular "ExcommKnap" hence i need somehow to also make the ID=" " of the headlinebox to contain the umbraco value of each page so that when you hover over a specific page link it shows the specific pages page name.
atleast this is how im trying to make it.
right now my Jquery looks like this, this makes the ExcommKnap fade in and out nicely. but i need to add the headlinebox hide/show function. and i also need the headlinebox to be on the start of the page load to be hidden. (this being the only thing i could get to work)
Just a quick addendum. HTML id cannot start with a number... so I would suggest you make it
<div id="page{@id}" class="headlinebox">
for the jquery I suiggest using the previous sibling function prev(). Depending on what you want to do to make the headlinebox show, then the following code should work.
Jquery problem. adding umbraco value to ID of element in foreach. +jquery show/hide problem
Hello there.
I have made a a macro that shows this for each page.
<div style="top:10px; width:755px;text-align:right; position:absolute; ">
<div id="<--wanna insert umbraco value here-->" class="headlinebox">
<xsl:value-of select="@nodeName"/>
</div>
</div>
<a href="{umbraco.library:NiceUrl(@id)}">
<img id="img3" class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}" />
</a>
My problem is im terrible at jquery and fairly new to umbraco and need to add that when i hover over the "ExcommKnap" with my mouse it also shows the headlinebox for that perticular "ExcommKnap" hence i need somehow to also make the ID=" " of the headlinebox to contain the umbraco value of each page so that when you hover over a specific page link it shows the specific pages page name.
atleast this is how im trying to make it.
right now my Jquery looks like this, this makes the ExcommKnap fade in and out nicely. but i need to add the headlinebox hide/show function. and i also need the headlinebox to be on the start of the page load to be hidden. (this being the only thing i could get to work)
<script type="text/javascript">
<![CDATA[
$(".ExcommKnap").mouseover(function () { $(this).stop().fadeTo('fast', 0.5, function(){}) });
$(".ExcommKnap").mouseout(function () { $(this).stop().fadeTo('fast', 1.0, function(){}) });
]]>
</script>
if anyone has a good suggestion to how this can be accomplished ill be very happy.
Jan,
I am assuming that you are writing on the
div id="<--wanna insert umbraco value here-->" class="headlinebox">in a loop in the macro?
if so just change the code to
div id="{@id}" class="headlinebox">and that will insert the page id although i dont think having just id its valid in css as its a number you may want to change it to Page-{@id}
Regards
Ismail
thanx Ismail
1 problem solved - now i just need to figure out how to get jquery to pick up that value and allow for the hover effect to work.
Jan,
If solved dont forget to mark as solution.
Regards
Ismail
Just a quick addendum. HTML id cannot start with a number... so I would suggest you make it
<div id="page{@id}" class="headlinebox">
for the jquery I suiggest using the previous sibling function prev(). Depending on what you want to do to make the headlinebox show, then the following code should work.
$(".ExcommKnap").mouseover(function () {
$(this).stop().fadeTo('fast', 0.5)
$(this).prev().find('div.headlinebox').show();
});
$(".ExcommKnap").mouseout(function () {
$(this).stop().fadeTo('fast', 1.0)
$(this).prev().find('div.headlinebox').hide();
});
/Josh
is working on a reply...