In my requirement i want to change the background image of a link for hover,mouse out and active in my master page i tried a couple ways but it is not giving a right solution for me .Kindly any one guide me to get the solution and my format is like the below
<a href='<%: Url.Action("ListTask", "Task") %>'>
<img id="taskImage" src='<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>' onmouseover="this.src='../Content/Images/MasterPage/TaskMenuHover.png'"
onmouseout="this.src='../Content/Images/MasterPage/TaskMenuNormal.png'" /></a>
the above code will work fine and here i need to fix the hover image at the active of the link and not to be changed at the time of active view(MVC) in the master page.(This code will be in the master page).
can anyone provide solution in javascrip or jqery.
Thanks.
you could do:
$('#taskImage').hover(function(){
$(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
}
$('#taskImage').mouseout(function(){
$(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}
Use the hover function. The first parameter is used on mouseover, the second on mouseout.
HTML
<img id="taskImage" src="<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>" />
jQuery
$('#taskImage').hover(
function() {
$(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
},
function() {
$(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}
);
Personally, I'd amend your markup to include the image in the A tag as a background in CSS. then you can use A:hover, and A:active CSS states to amend your link. This then means no javascript needs to be used.
Related
I have regular dropdown control in mvc. I want to decorate it with chosen, I have seen the API in their official website. It's as
$(".chosen-select").chosen({width: "95%"});
Even with plain dropdown it's width remains unchanged. Help Please.
I have written like below and worked for me.
CSS
<link href="~/Content/chosen.css" rel="stylesheet" />
Html
#Html.DropDownList("naicsCodeSelect", ViewBag.selectCodes as List<SelectListItem>, new { #multiple = "true", #class = "chosen-select" })
Javascript
<script src="~/Scripts/chosen.jquery.js"></script>
<script>
$(document).ready(function() {
$(".chosen-select").chosen({width: "95%"});
});
</script>
Update
if the above code does not work then use the below style
<style>
.chosen-container
{
width:95%!important;
}
</style>
On their demo site, the 95% width example defines the following:
<div class="chosen-container chosen-container-single" title="" style="width: 95%;">
<a class="chosen-single">
.
.
Your chosen dropdown should have the same application. If you inspect the source, can you confirm that.
The chosen() plugin determines the size of the searchable dropdowns by reading the select's outerWidth property. Unfortunately, the calculated width is just a little to narrow for a proper display. The easiest way to adjust the width is to change the size of the select field's outerWidth property. The following code will do this for you:
jQuery(document).ready(function ($) {
// change field_g69s05 to your field's ID
$("#field_g69s05").outerWidth(230);
});
Hope this is helpful :)
use this
$('.chosen-choices').css("width", "50px");
or
$('.chosen-choices').css("width", "50%");
I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});
I am trying to programmatically click a link in jQuery Mobile but its not working. Here is the page code.
<section id="welcome" data-role="page">
<div class="content" data-role="content">
<a id="myLink" href="http://www.google.de" target="_blank">The link</a>
<input type="button" id="launcher" value="Launch the link"/>
</div>
</section>
and here is the correpsonding javascript code:
$(document).ready(function()
{
$("#launcher").bind("click",function()
{
console.log("Inside the button click handler");
$("#myLink").click();
});
});
Seems straightforward enough but I can,t seem to make it work.Any help is appreciated.
A possible reason for it not working is that there is another <a id="myLink"></a> in the DOM, but not in the active page. If that is the case, your code might be triggering the click handler on that element rather than the one you see on screen. Maybe using $.mobile.activePage.find("#myLink").click(); will work.
Also, you should avoid using $(document).ready() in jQuery Mobile.
Not really an answer to the question,but this can be a solution if you want to achieve only the link to be launched(and you dont want to execute the click handler you have defined for the link,if any)
$(document).ready(function()
{
$("#launcher").bind("click",function()
{
console.log("Inside the button click handler");
window.open($("#myLink").attr("href"),$("#myLink").attr("target"));
});
});
You should use a trigger, like so:
$('#mylink').trigger('click');
also, check your binding is actually being bound to an element. In JQM you should not rely on $(document).ready. Instead use $(document).bind('pageinit') . See here
I had the same problem.
What worked for me was calling click() on the DOM object itself. Just add ”[0]” after the jQuery object.
Like this:
$(document).ready(function()
{
$("#launcher").bind("click",function()
{
console.log("Inside the button click handler");
$("#myLink")[0].click();
});
});
Here: http://jqueryui.com/docs/Theming/ThemeSwitcher
I found nice widget to switch on the fly jQueryUI themes on my page.
And also I've created my own custom theme. How to add it in list of themes?
I used the same solution as you...downloaded the js from http://jqueryui.com/themeroller/themeswitchertool/, saved it as jquery.themeswitcher.js and replaced all http jquery-ui urls with google apis https urls.
The only changes were in the var switcherpane where each link looks like:
<li><a href=
"http://jqueryui.com/themeroller/css/parseTheme.css.php?....">
<img src=
"http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_dark.png" alt=
"UI Darkness" title="UI Darkness" /> <span class="themeName">UI
darkness</span></a></li>
Which I replaced with:
<li><a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<img src="content/images/theme_90_ui_light.png" alt="UI Lightness" title=
"UI Lightness" /><span class="themeName">UI lightness</span></a></li>
You can add your custom images as a <li> in the var switcherpane.
If you search through the file there are a few other html images that are referenced further down.
As far as legality goes, I'm not too sure but I can't see why you would't be able to as jQuery UI is free and open source.