Is it possible to change CSS position of a background image with a DIV ("omega") from a separate link ("alpha") with a MOUSEOVER?
<a class="omega" href="#"></a>
<div id="alpha"></div>
Is JavaScript/jQuery ok? If so, something like this should work:
$('.omega').hover(function(){
$('#alpha').css('backgroundPosition', '500px 150px');
}, function(){
$('#alpha').css('backgroundPosition', '0px 0px');
});
The first function is for mouseover, the second one resets it when the mouse leaves. Admittedly, I haven't tried this, but in theory it should work. See jquery hover and jquery css for more info.
Related
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)
I am using Joomla 1.5.22 with Mootools 1.1. I have a module with a form contained in a hidden div that I want to open in Joomla's built in modal box. The problem I have is that when I click the link the form opens in the modal box, but it also opens the div in the module on the page.
HTML:
<div id="moduleBox">
<div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
<div id="hiddenForm">
form code goes here
</div>
</div>
Javascript:
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('hiddenForm').setStyle('display','block');
});
});
So how do I get the form to only show up in the modal box?
You can see what I am talking about here - http://www.internextion.com/
It's the Call Back Module. I already added the handler: 'adopt' as suggested below, now the result is a little different. The target div still shows up below the link, but now the modal window contains the link rather than the target.
I think this uses Harald's SqueezeBox - in which case, you are looking at the following scenarios:
find the target div and CLONE it to insert into the modal box.
find the target div and ADOPT it into the modal box.
you are seeing the first (default) case. to achieve the second effect, add:
handler: 'adopt'
to the instantiation options. more here: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/
Option 1:
If you look at the html code (in firebug) for the overlay div you will see that it makes a "copy" of html and places inside the overlay container with id="sbox-content". In theory if you add a CSS like below +/-, it will hide the link and display everything else. This might be the simplest and easiest solution.
div#sbox-content > a#formClick{
display: none;
}
Option 2:
If option 1 does not work for some reason, you can try playing with CSS and hide the link when the Modal box opens and then making it visible when it closes.
Modify the JS to add a class instead of modifying the style.
window.addEvent('domready', function() {
$('formClick').addEvent('click', function(){
$('formClick').addClass('hidden');
$('hiddenForm').setStyle('display','block');
});
});
Load additional CSS that will make the link invisible
div#clickMeButton.hidden {
display: none;
}
Then you will have to overload closing event and make the link visible...
Ok, so I finally got it to work with a combination of the other answers given. First, I removed the javascript click event to make the form appear, that solved the issue of the form showing up below the link. Next, I added new CSS for the hiddenForm ID within the modal box and set that to display:block. It appears that the default handler behavior (in Joomla at least) is to adopt the content since I have removed the handler: 'adopt' and it is still adopting the content.
I knew it was something simple, thanks for the help!
BTW - the link is still live, you can see the correct behavior on the demo site. Now all I need to do is add some fancy AJAX form submission and it will be ready for prime time.
So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx
All,
I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs-loading-message").show();
$('#fragment-1').tabs({cache:false, spinner:''});
});
</script>
The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into "<div id='commonDiv'></div> instead of going into "cats" div and "dogs" div.
The loading should be reusable, in the sense, if call reload("Dogs") from anywhere inside "dogs" tab, it should reload the "dogs" tab content.
How can I achieve this?
Just looking at the docs, nothings pops out as to how to do that. It's easy enough to not use the tabs widget though, and define your own click events for basic tab functionality.
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
<div id="commonDiv"></div>
</div>
$(document).ready(function(){
$('#fragment-1 a').click(function(){
$('#commonDiv').load($(this).attr('href'));
});
}):
You would need to define your own css styles though, as it looks like the tabs widget does that for you.
Not sure if I understtod you well; as far as I know if you give all your tabs the same tittle atribute, the UI will rehuse the same DIV to load the content, instead of creating a new one for every tab and hide or show as required. Is a good thing since the browser doesn't get so heavy weighted with a lot of DIVS loaded but hidden ...