Web Development

28-Jun-13 3:33

Hi ,

I am using the below code to convert the checkboxes in a list to radio buttons

var element = checkbox.replaceWith('<input type="radio" id="rdList" style="width:12px; height:12px;" value="'+checkbox.attr('value')+'"/>');

This changes all the check boxes to radio buttons. Since I needed on of the radio button to be checked ,I used the below code.

document.getElementById("myradio").checked = true;

This makes the first list item to be checked but only for few seconds. Then it unchecks by itself. I also used the below code for the same purpose.

$("#myradio")[0].checked = true;

The result is the same. Any idea why the check status doesnt stay as it is?

Many thanks in advance.

astrixtech30-Jun-13 19:29

30-Jun-13 19:29

If any one could help, then that will be greatly appreciated as I am stuck with this issue. I have googled a lot. But still I didnt get an answer why the selection disappears after few seconds.
Frown | :(

modified 1-Jul-13 2:15am.

thanh_bkhn30-Jun-13 20:37

thanh_bkhn

30-Jun-13 20:37

What does "uncheck by itself" means? Do you have the refresh interval or element regenerate interval?
Btw, your radio buttons have "rdList" in their id, but you used "myradio" to access them.

astrixtech30-Jun-13 21:12

30-Jun-13 21:12

Uncheck means, deselected by its own.
Suppose if any user checks a radio button, the whole list item will be highlighted showing its selected.
But here, the list item is not highlighted ,only the radio button is checked.And that state is not stable.
I dont have any refresh interval implemented.
And the id is rdList. Its a typo. D'Oh! | :doh:

,my mistake Big Grin | :-D

thanh_bkhn30-Jun-13 21:25

thanh_bkhn

30-Jun-13 21:25

I still have no idea about why your radio button got deselected by its own.
But as you describe, if you want all your radio buttons act like a "group", you should set a name for all of them, like:

<input type="radio" id="rdList" name="myRadio" value="1"/>
<input type="radio" id="rdList" name="myRadio" value="2"/>
<input type="radio" id="rdList" name="myRadio" value="3"/>

astrixtech30-Jun-13 21:40

30-Jun-13 21:40

I have tried putting them in a group and making the first element checked. But the result is the same.
Just now I have added runat="server" in radio button control.

After that when I used document.getElementById("rdList").checked = true;, it threw error saying getelementID is having Null object.

When I used $("#rdList")[0].checked = true;, it threw error saying '0' is null.

thanh_bkhn30-Jun-13 21:55

thanh_bkhn

30-Jun-13 21:55

You got error because of [runat="server"].
I can't understand why a radio got deselected by itself. Can you post your complete HTML code?

astrixtech30-Jun-13 23:00

Regarding Wordpress Solution

30-Jun-13 23:00

Okay I thought the code started to work a bit cos of runat attribute. Thanks for the info. Smile | :)

Please find below the code.

$(document).ready(function() {
var chbx = $(".s4-itm-cbx");
var element = chbx.replaceWith('<input type="radio" runat="server" name="rdList" style="width:12px; height:12px;"  value="'+checkbox.attr('value')+'"/>');
//document.getElementById("#rdList").checked = true;
//$("#rdList").checked = true;
//$(this).trigger('click');
//$('input:radio[name=rdList]')['0'].checked = true;
$('input:radio[name=rdList]:nth(0)').attr('checked',true);
$("input:radio[name=rdList]:checked").trigger('click');


$("input[type='radio']").click(function(){
var crbx = document.activeElement;
$("input[type='radio']").each(function () {
if(this!= crbx && this.checked == true){
this.checked = false;
$(this).trigger('click');
}
});
});
});

Couple of other information:
I am creating a Sharepoint list,where checkboxes are allowed. The requirement is ,the user should be able to select only one listitem at a time.Thats why I am changing the checkboxes to radio button. Again, the first list item should be selected by default.Hope, this information is sufficient.

David Kroj26-Jun-13 22:57

David Kroj

26-Jun-13 22:57

My article website very slow. Guide me how we can make fast. It based on article.

Website Development Company | Web Development Company

Help for a new and intersted to know about HTML

BLue.iCe.BoX26-Jun-13 22:41

BLue.iCe.BoX

26-Jun-13 22:41

i don't have a knowledge about html, and i want to know it. my friend said that i learn first an html, to become a web developer.
can u please give me a tips or samples to familiar the codes??

Re: Help for a new and intersted to know about HTML

jaideepsinh27-Jun-13 0:45

jaideepsinh

27-Jun-13 0:45

Go tho this link :
http://www.w3schools.com/html/default
here you can get tips and samples.

Re: Help for a new and intersted to know about HTML

BLue.iCe.BoX27-Jun-13 17:19

BLue.iCe.BoX

27-Jun-13 17:19

thank you...hmmm

Breadcrump

astrixtech26-Jun-13 20:28

26-Jun-13 20:28

Hi,
I have to implement breadcrump of the navigation within the site by a user. I have found the following code in the v4.master.

<SHAREPOINT:SPLINKBUTTON id=onetidProjectPropertyTitle navigateurl="~site/" runat="server"><SHAREPOINT:PROJECTPROPERTY runat="server" property="Title"></SHAREPOINT:PROJECTPROPERTY></SHAREPOINT:SPLINKBUTTON>

The above was replaced by the following code.

<ASP:SITEMAPPATH runat="server" hideinteriorrootnodes="true" rootnodestyle-cssclass="breadcrumbRootNode" currentnodestyle-cssclass="breadcrumbCurrentNode" nodestyle-cssclass="breadcrumbNode" rendercurrentnodeaslink="true" sitemapproviders="SPSiteMapProvider,SPXmlContentMapProvider">  
 </ASP:SITEMAPPATH>

This partially worked by showing the first link that user visits ,on left top of the site. But the problem is ,its replacing the site's logo.Also its showing only the first link.After that it doesnt show anything.
Any idea what changes do I have to make?

Re: Breadcrump

astrixtech30-Jun-13 19:30

Highlight a button on mouse hover

30-Jun-13 19:30

Any help?

modified 1-Jul-13 2:15am.

CSS-Sprites question

vkEE26-Jun-13 5:06

vkEE

26-Jun-13 5:06

Hello,

I do apologize if this is the incorrect forum - there is not one set up for HMTL related questions.

I am new to sprites concept. With that said, I have generated a sprite using a tool available on web.

This sprite has 5 images.

Now, I want to display the images on different locations on a given page. The first image right corner. Second image is 3/4 down the page on left side.

I created a navigation list for first image. Please see below. I have specified the the top at 45px. How would i manipulate the second image now, to show at different locations on the same web page? Would I add another navigation list and work that way? Is there a way I can control the location of image in #advsearch specification? Thank you!

HTML

<style>
       #navlist {position: relative;}
       #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:45px;}
       #navlist li, #navlist a {height:23px;display:block;}

       #advsearch {left: 650px;width: 136px;}
       #advsearch {background:url('CSS_Sprite_1.png') 0 0;}
   </style>

XML

<body>
     <ul id="navlist">
        <li id="advsearch"><a href="http://search.com/"></a></li>
    </ul>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>

astrixtech26-Jun-13 2:53

26-Jun-13 2:53

Hi ,
I am creating a list in sharepoint with two buttons for creating and getting the details of the list item.Here,when the user is hovering the mouse on buttons,the buttons should be highlighted. I have put the below code in css for changing the color.

btn:hover
{
background-color:Silver;
}

Here,btn is the class name. But this didnt bring the expected change. What am I missing? Pls help.

Graham Breach26-Jun-13 3:32

Graham Breach

26-Jun-13 3:32

If "btn" is the class name, you are missing a '.' character in front:

CSS

.btn:hover
{
   background-color:Silver;
}

Blikkies26-Jun-13 3:34

26-Jun-13 3:34

You forgot to add the . in front of you class name, should look as follows:

CSS

.btn:hover   
{   
      background-color:Silver;   
}

astrixtech26-Jun-13 20:13

26-Jun-13 20:13

Actually its a typo from my side when entered the question.Still its not working.

Blikkies26-Jun-13 20:57

26-Jun-13 20:57

Is the btn class in a style sheet or in a tags in the page?

astrixtech26-Jun-13 21:14

26-Jun-13 21:14

It is in the style sheet.
And for the button I have mentioned the class as btnhover.

Blikkies26-Jun-13 21:24

26-Jun-13 21:24

Here is few things you can check

Make sure the style sheet is correctly referenced in you page.
Make sure that there is no other styles overwriting the btn:hover class
Make sure that the default btn style background-color does not have !important after it

If nothing works, try adding !important to you background-color style in you .btn:hover class e.g.

CSS

.btn:hover   
{   
      background-color:Silver !important;   
}

If the problem still exists, provide more html and style sheet code

astrixtech27-Jun-13 2:15

27-Jun-13 2:15

The following is the button that I have created.I havent mentioned background color for default style.

<input name="btnOkay" class="btn" title="btnOkay" disabled="disabled" type="button" value="Okay" style="background: -webkit-linear-gradient(#53B7E8, #214D6B);
background: -moz-linear-gradient(to bottom, #53B7E8, #214D6B);
background: -ms-linear-gradient(#53B7E8, #214D6B);
background: -o-linear-gradient(#53B7E8, #214D6B);
background: linear-gradient(to bottom, #53B7E8, #214D6B);
position:relative;
left: 50%;
top:50%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53B7E8',
endColorstr='#214D6B');zoom: 1;width:150;height:30;border-radius:10px;color:white;">

Still it doesnt work.

astrixtech27-Jun-13 2:38

27-Jun-13 2:38

Hey
Theres some improvement in the issue.I have made the below changes

input name="btnOkay" class="btn" title="btnOkay" disabled="disabled" type="button" value="Okay" style="position:relative;left: 50%;top:50%;zoom: 1;width:150;height:30;border-radius:10px;color:white;" /></div>

Now its showing the color change. But I have to do some more modifications like , the button shouldnt highlight when its disabled. Currently its highlighting irrespective of the disable status.Should I use JQuery to apply this logic or is there any other alternative?

Blikkies27-Jun-13 2:53