Zmiana marginesu elementu div przy pomocy JavaScript

siema.
Chce napisac w java scipt funkcje ktora bedzie przesuwała jakiś element np jakiegos diva zmieniając mu np: margin-left:
da sie to zrobic ? jezeli tak to jak , pozdro !

Da się, oczywiście że się da.

PS
Google nie gryzie.

Sugeruję zainteresować się jQuery.

Chodzi mi konkretnie o to ze mam menu(poziome,wsadzone w diva) na stronie i tam 6 znacznikow -odsylacze do roznych podstron i chce zeby po wcisnieciu ktoregos z nich, za nim ustawial sie background-image z taka strzalka(co mialoby informowac uzytkownika ze wlasnie ten 'dzial' jest teraz aktywny). Szukalem w google niestety nie pomoglo, moze moglby ktos troche nakierowac ?

Nie jest potrzebny do tego javascript, wystarczy css i :hover. Nie wiem jak nowe IE sobie z tym radzą, ale kiedyś w IE6 :hover działało tylko dla a.

z tego co wiem to:
A:hover - nakierowany wskaźnikiem myszki
ja chce zeby obrazek pokazywal sie po zdarzeniu onclick, jakieś pomysly ?

A, po kliknięciu. Na pewno chcesz zmienić wygląd przycisku po jego wciśnięciu? Co robi właściwie ten przycisk, ładuje nową stronę? Wiesz, że stracisz jego stan (nowe tło) po przeładowaniu? Bo asynchronicznie chyba nie podmieniasz strony, skoro nie potrafisz zrobić podmiany tła.

Mam master page i menu mi sie nie przeładowuje , jedynie content place holder w ktorym zawarta jest tresc wybranego poddziału, menu jest cały czas stałe, wystarczy tylko po zdarzeniu onclick wywolac funkcje w js ktora ustawi odpowiednio background-image dla mojego menu. tylko jak to zrobic...

Jezeli chodzi o jQuery, to:

$('#id-diva').css('margin-left', '20px');

<script type="text/javascript">
function dodaj_tlo(el) {
  el.style.backgroundImage="/css/images/tlo.png";
}
</script>
<a href="" onclick="dodaj_tlo(this);">menu item</a>

tylko podejrzewam, ze chcesz czyścić tło dla wszystkich elementów w menu, tu już trzeba trochę więcej js. nie chce mi się pisać. jak się Tobie chce poklikać to sobie znajdziesz w google. chyba, że chcesz zaprzęgać jQuery, to o wiele łatwiej, bo możesz wybierać elementy jak w css.. ale to też sobie poszukaj

Adam Boduch napisał(a)

Jezeli chodzi o jQuery, to:

$('#id-diva').css('margin-left', '20px');

Mam z tym problem bo jak wywoluje zdarzenie onclick ktore potem wywoluje ten kod jquery to przesuwa mi tego diva w prawo o te 20px , ale zaraz stronka sie laduje od nowa (bo przeciez zmienilem dział w menu) i wtedy ten div jest juz normalnie polozony (myslalem ze master page na to zaradzi, ale niestety nie) . mozna to jakos ustawic zeby przesuwal sie juz po wczytaniu tresci nowego dzialu ?

Oczywiscie, ze powraca, bo to sa statyczne elementy strony WWW. Aby "zapamietac" te ustawienia musisz je zapisac w pliku cookie.

a mozna jakoś podpiąc do zdarzenia onclick w html funkcje zapisaną w C# (pisze w VS2008 i chodzi mi o zmiane Label1.Text="jakis_inny")

Adam Boduch napisał(a)

Oczywiscie, ze powraca, bo to sa statyczne elementy strony WWW. Aby "zapamietac" te ustawienia musisz je zapisac w pliku cookie.

mozesz powiedziec jak to zrobic ?

rahim99 napisał(a)

a mozna jakoś podpiąc do zdarzenia onclick w html funkcje zapisaną w C# (pisze w VS2008 i chodzi mi o zmiane Label1.Text="jakis_inny")

Fail. Piszesz stronę internetową w C#? Może czas otworzyć notatnik i zrobić to bez ogromnych frameworków...

nie pisze strony w c#, wszystko jest w htmlu. chce tylko wiedziec czy mozna funkcje z c# podlaczyc do html'a .

zrobilem juz podmiane tego tla za pomoca zamiany class w jquery:

$("#def").removeClass('nieaktywny').addClass('aktywny');

tylko jest tak jak mowilem ze po przeladowaniu mi to znika i znowu jest klasa nieaktywny, pomozcie please.

mówiłeś, że masz jakieśtam ramki i menu Ci się nie przeładowywuje? :/
A więc na początek: zostaw js! Nie jest Ci potrzebny!

Jak masz całą stronę w czystym html, i każda podstrona ma swoje własne menu, to po prostu dopisuj klasę do "aktywnej" podstrony.
A jak w php to coś takiego:

<a href="" <?php if ($strona=='index') { echo 'class="aktywny"'; } ?>>Index</a>
<a href="" <?php if ($strona=='o-mnie') { echo 'class="aktywny"'; } ?>>O mnie</a>

edit: tak w ogóle to podziel się kodem, będzie łatwiej..

php mnie za bardzo nie interesuje, w ogole mozna uzywac php w asp.net ?
kod mam taki:

<form id="form1" runat="server" > 
<div id="menu" >   <br />                                        
        <a href="Default.aspx" id="1" class="aktywny" onclick="return f();">Główna</a>        
        <a href="Oferta.aspx"  class="nieaktywny">Oferta</a>        
        <a href="Decyzje.aspx" class="nieaktywny">Decyzje</a>
        <a href="O firmie.aspx" class="nieaktywny">O firmie</a>
        <a href="Galeria.aspx" class="nieaktywny">Galeria</a>
        <a href="Kontakt.aspx" class="nieaktywny">Kontakt</a>
        <a href="Admin.aspx" class="nieaktywny">Admin</a>
        </div>
</form>
 

function f() {
        $("#1").removeClass('buttonik').addClass('aktywny');
        return false;
}

tak jak mowilem funkcja f() działa tylko ze potem przeladowuje stronke i juz jest wszystko po staremu, moze cos z tymi plikami cookie tak jak tu wczesniej ktos wspominal? ktos jest w temacie ? jakies inne propozycje ?

jest tu ktos kto po prostu wie jak to zrobic ? szukam caly dzien i nic z tego ...

Demonical Monk napisał(a)

Fail. Piszesz stronę internetową w C#? Może czas otworzyć notatnik i zrobić to bez ogromnych frameworków...

Zwłaszcza jakiegoś PHP... ;]

rahim99 napisał(a)

nie pisze strony w c#, wszystko jest w htmlu. chce tylko wiedziec czy mozna funkcje z c# podlaczyc do html'a .

Ideą ASP.NET jest używanie kodu np. C#. Tylko skoro chcesz go używać, skoro używasz już np. Label, to dlaczego uparłaś się na linki HTML, a nie na odpowiednie kontrolki ASP.NET, czyli np. LinkButton? Albo w ogóle użycie gotowego Menu?
Chyba da się zrobić zwykłego linka, który uruchomi serwerowe zdarzenie C#, trzeba tylko wiedzieć co wpisać w href. Ale to sztuka dla sztuki.

Zdecyduj się, co właściwie chcesz osiągnąć, czy to ma być HTML + JS, czy w końcu ASP.NET i daj znać.

Mam juz cala strone zrobioną , wystepuje w niej zarowno kod c# podpiety do odpowiednich buttonow itp..., jak i kod javascript(np galeria), wiec jest mi to bez roznicy czego uzyje. nie znam zadnej metody aby rozwiazac moj problem. wolałbym żeby było to zrobione za pomocą c# poniewaz bardziej go ogarniam(javascript nie bardzo). Jeszcze raz napisze oco mi dokladnie chodzi:
Mam poziome menu wsadzone w diva a tam znaczniki <a href="Default.aspx"> i <a href="Galeria.aspx"> i jeszcze pare innych. chce aby po kliknieciu na galeria w tle menu pokazywal sie background-image z odpowiednim marginesem od lewej tak aby był on w tej samej pozycji co znacznik <a>galeria</a>. ( taka strzalka ktora pokazuje gdzie teraz jestesmy-chyba wiesz oco chodzi).

To może po prostu tak?

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebApplication2.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .active
        {
            margin-left: 20px;
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="float: left; width: 200px;">
            <ul>
                <li><a id="linkDefault" runat="server" href="~/Default.aspx">Default</a></li>
                <li><a id="linkSecond" runat="server" href="~/Second.aspx">Second</a></li>
            </ul>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float: left; width: 600px;">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

using System;
using System.IO;
using System.Web.UI.HtmlControls;

namespace WebApplication2
{
    public partial class Main : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string linkId = "link" + Path.GetFileNameWithoutExtension(Request.PhysicalPath);
            HtmlAnchor link = this.FindControl(linkId) as HtmlAnchor;
            link.Attributes.Add("class", "active");

            this.Label1.Text = link.InnerText;
        }
    }
} 

Wystarczy jedynie pilnować odpowiednich id w linkach w menu, a kod w Page_Load sprawdza nazwę podstrony i nadaje odpowiednią klasę odpowiedniemu linkowi, do tego możesz zmieniać właściwości innych kontrolek, itd.

Super. Oto mi chodziło, dzięki wielkie !

I w ten sposób rozwiązaniem problemu "Zmiana marginesu elementu div przy pomocy JavaScript" okazało się być wyrenderowanie odpowiedniego kodu HTML przez ASP.NET. IMHO łatwiejsze i lżejsze niż JavaScript + ciasteczka.
Tak przyszłość, to pisz po pierwsze dokładnie co chcesz osiągnąć, po drugie jakich technologii czy języków używasz - jak widać ma to znaczenie.

a dlaczego u mnie, przy tej linii:

link.Attributes.Add("class", "active");

wywala błąd:

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

somekind napisał(a)

To może po prostu tak?

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebApplication2.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .active
        {
            margin-left: 20px;
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="float: left; width: 200px;">
            <ul>
                <li><a id="linkDefault" runat="server" href="~/Default.aspx">Default</a></li>
                <li><a id="linkSecond" runat="server" href="~/Second.aspx">Second</a></li>
            </ul>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float: left; width: 600px;">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

using System;
using System.IO;
using System.Web.UI.HtmlControls;

namespace WebApplication2
{
    public partial class Main : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string linkId = "link" + Path.GetFileNameWithoutExtension(Request.PhysicalPath);
            HtmlAnchor link = this.FindControl(linkId) as HtmlAnchor;
            link.Attributes.Add("class", "active");

            this.Label1.Text = link.InnerText;
        }
    }
} 

Wystarczy jedynie pilnować odpowiednich id w linkach w menu, a kod w Page_Load sprawdza nazwę podstrony i nadaje odpowiednią klasę odpowiedniemu linkowi, do tego możesz zmieniać właściwości innych kontrolek, itd.

no to jest mały problem z tym skryptem. A co jeśli dostane się na stronę która będzie się inaczej nazywać ale będzie podstroną danego działu to jak wtedy wyróżnić na tej stronie odpowiednią pozycję menu??