We Keep Coding

How do I insert a ahref around my mouseover divs - wordpress keeps removing the ahref

on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.

Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.

I want a thumbnail to expand in size as the div does

Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>

Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.

In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.

Play/Show "swf" in a "a rel="""

I have this working code for IMAGES:
<a class="showimage" rel="http://www.sitename/images/image.png" >
<span>hover here</span>
</a>
plus some javascript and css code.... so the final result is now when you hover on "hover here" it shows the actual IMAGE "http://www.sitename/images/image.png" - something like this ( http://goo.gl/jhyNm )
What I want to ask is, is it possible to show/play .SWF file instead of image.... so the process is the same, I hover on "hover here" text and it shows the .SWF ?
Any help will be appreciated.
Thanks

I'm not 100% sure, but you can try to embed SWF in div element and using JS detect mouse over event on "hover here" and then show or hide div.

About "showing" the .swf file - it's pretty easy,
about "playing" it - I don't really know if it's possible just with js.
I guess you'll need some API involved. (an autoplay option if exists).
Anyway,html:
<a href='#' id='showMovieText'>
Hover Me
<div style='display:none'>
<!--EMBEDED SWF FILE HERE-->
<embed ....>
</div>
</a>
jQuery:
$('#showMovieText').hover(function(){
$(this).find("div").css('display','block');
});
Demo: http://jsfiddle.net/YbWgh/

problems in creating a flyout/sidebar menu

I need some css and syntax help,please. Your help is warmly welcome.
I want to insert a list containing some skypelinks and behaving like a sidebar menu when I move the mouse over the image.
This is the html-code I tried to manipulate:
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename">
</a>
By moving the mouse over the image and the images title is skypename the two links should fade out to the right(float:right;?)
$("img[title$=\"skypename\"]").mouseover(function(){
$("<ul><li>Call</li><li>Chat</li></ul></li></ul>");
});
My aim is to let the html-code look like:
<ul>
<li>
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!">
</a>
<ul>
<li>Call</li>
<li>Chat</li>
</ul>
</li>
</ul>
I created a fiddle http://jsfiddle.net/erhDJ/2/ where I tried sth. to work like a flyout menu.
In my case the first code I mentioned above would be replacing Klick me!.
By moving the mouse over it the two links should fade out to the right.
My questions:
How can I surround the first code with the second so that it looks like the third code snippet?
Do you see an easier option to create such a flyout menu?
Thank you.

I'm not too sure about what you actually want, but I can give you an example of animating menu's with some CSS and jQuery.
Sliding, animated menu when hovering link
Is this useful?

JQuery .fadeIn() levels off when hiding and reshowing an element

So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.

I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/