تغيير Theme بدون رفرش شدن صفحه

[bftarane]

سلام.
چطور مي شه ظاهر صفحه رو تغيير داد بدون اينکه صفحه رفرش بشه؟
و همينطور به نحوي که وقتي کاربر در صفحات مختلف گردش مي کنه همون Theme اي که اول انتخاب کرده باقي بمونه مثلاً يه دفعه رنگ قرمز رو براي سايت انتخاب کرد در صفحه هاي مختلف هم که گردش مي کنه صفحات رو قرمز ببينه؟
ممنون.

[exlord]

فایل css رو میتونین با javascript لود کنین ...
http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript
و آدرس فایل لود شده رو توی cookie ذخیره کنین و هربار که صفحه لود میشه از cookie اون فایل css رو هم لود کنین...
http://www.w3schools.com/js/js_cookies.asp

[bftarane]

سلام.
الآن من سه تا لينک به شکل زير در صفحه گذاشتم

<ul>
<li><a id="css-black" href="#">Black</a></li>
<li><a id="css-blue" href="#">Blue</a></li>
<li><a id="css-green" href="#">Green</a></li>
</ul>
سه تا استايل شيت هم در پوشه App_Themes دارم
حالا سعي کردم با کدهاي زير روي هر لينک که کليک بشه استايل شيت عوض بشه منتها اولين بار که کليک مي کنم کار ميکنه مثلاً صفحه مشکي ميشه ولي بعد که رو لينکهاي ديگه مثلاً آبي و سبز کليک مي کنم اتفاقي نمي افته.

<script type="text/javascript">
$(document).ready(function () {
// black
$("#css-black").click(function () {
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId)) {
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'App_Themes/Black/StyleSheet.css';
link.media = 'all';
head.appendChild(link);
}
});

// blue
$("#css-blue").click(function () {
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId)) {
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'App_Themes/Blue/StyleSheet.css';
link.media = 'all';
head.appendChild(link);
}
});

// green
$("#css-green").click(function () {
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId)) {
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'App_Themes/Green/StyleSheet.css';
link.media = 'all';
head.appendChild(link);
}
});
});
</script>
کدهام چه اشکالي دارن؟
راستي يادم رفت بگم اين رو هم در head نوشتم

<link id="myCss" href="App_Themes/Blue/StyleSheet.css" rel="stylesheet" type="text/css" />
يعني يه آي دي به اسم myCss به لينک بالا دادم.

[bftarane]

اون قسمت if رو بر داشتم از کدها اون مشکل برطرف شد. نمي دونم چرا در اين تالار امکان حذف پست وجود نداره.

[exlord]

راهنمای کامل این کار :
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

[bftarane]

سلام.
من سعي کردم با کمک لينک پست 5 اين کار رو انجام بدم ولي متأسفانه به نتيجه نرسيد البته با کليک روي لينک ها عوض ميشه css ولي مسئله اينه که با تغيير صفحه استايل باقي نمي مونه، خيلي جالبه حتي چک کردم ديدم کوکي هم ذخيره ميشه و مقدارش هم به درستي ست ميشه ولي نمي دونم چرا اين مشکل وجود داره
من با Asp.net کار مي کنم اول گفتم شايد چون از MasterPage دارم استفاده مي کنم اين طوره ولي اومدم با صفحه معمولي و همين طور صفحه html هم چک کردم فرقي نکرد.
فايلش رو ضميمه مي کنم لطفاً هر کس متوجه شد ايراد از کجاست راهنمايي کنه.
هر چي سعي کردم در اين تالار نتونستم ضميمه کنم، از لينکهاي زير ميتونيد دانلود کنيد
http://uplod.ir/7cffejb67i3j/WebSite1.zip.htm
http://www.4shared.com/zip/3aSB2BGk/WebSite1.html
....................................
و البته با کمک پست 2 اين کدها رو نوشتم که جواب هم ميده

<script type="text/javascript">
$(document).ready(function () {
// red
$("#css-black").click(function () {
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..

var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'App_Themes/Black/StyleSheet.css';
link.media = 'all';
head.appendChild(link);

setCookie("theme", 'App_Themes/Black/StyleSheet.css', 365);

});

// blue
$("#css-blue").click(function () {
مشابه کدهاي بالا
setCookie("theme", 'App_Themes/Blue/StyleSheet.css', 365);

});

// green
$("#css-green").click(function () {
مشابه کدهاي بالا
setCookie("theme", 'App_Themes/Green/StyleSheet.css', 365);


});
});


function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}

function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}

function checkCookie() {
var theme = getCookie("theme");
if (theme != null && theme != "") {
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..

var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = theme;
link.media = 'all';
head.appendChild(link);
}
else {



}
}
</script>




<body onload="checkCookie() ;">
در قسمت head هم همچين کدي نوشته بودم

<link href="App_Themes/Black/StyleSheet.css" rel="stylesheet" type="text/css" />
ولي فقط يه اشکال داره اونم اينه که مثلاً استايل سبز رو انتخاب کرده کاربر صفحهش هم سبز شده منتها وقتي کليک مي کنه بره يه صفحه ديگه قبل از اينکه صفحه بعدي به رنگ سبز ديده بشه حدود 1 ثانيه به رنگ سياه ديده ميشه يعني حدود 1 ثانيه اون استايلي که به صورت ثابت در head نوشته شده نشون داده ميشه به کاربر بعد سبز ميشه.
خودتون مي تونيد اين رو در سايتم چک کنيد http://www.bfportfolio.somee.com
اون بالاي سايت اون قسمت که نوشته Portfolio روي مربع آبي يا سبز کليک کنيد
بعد از منويي که زير باکس ورود هست منوي تماس با ما رو کليک کنيد خودتون متوجه مي شيد.

لطفاً راهنمايي کنيد.

[exlord]

اون صفحه ای رو که دادم درست بررسی نکردین ... فقط اسم متد هارو برداشتین ...

ولي فقط يه اشکال داره اونم اينه که مثلاً استايل سبز رو انتخاب کرده کاربر صفحهش هم سبز شده منتها وقتي کليک مي کنه بره يه صفحه ديگه قبل از اينکه صفحه بعدي به رنگ سبز ديده بشه حدود 1 ثانيه به رنگ سياه ديده ميشه يعني حدود 1 ثانيه اون استايلي که به صورت ثابت در head نوشته شده نشون داده ميشه به کاربر بعد سبز ميشه.توی Page_Load (سمت سرور) چک کنین اگه cookie وجود داره css مربوطه رو به صفحه اضافه کنین ...
این کدی که نوشتم الان کاملا درست کار میکنه
من VS نصب نداشتم قسمت سرورشو با php نوشتم ولی فکر نکنم تو تبدیلش مشکلی داشته باشین چیزه سادییه ...


$user_selected_theme = $_COOKIE['user_selected_theme'];
$css = '';
if ($user_selected_theme)
$css = "<link rel='stylesheet' type='text/css' href='{$user_selected_theme}.css'>";
?>
<html>
<head>
<?=$css?>
<script type="text/javascript" src="../jquery.1.7.2.js"></script>
<script type="text/javascript">
var themes = ['black', 'blue', 'red'];
$(document).ready(function () {
$('.theme_switch').click(function () {
disable_themes();
switch_theme($(this).attr('id'));
});
});
function disable_themes() {
for (var i = 0; i < themes.length; i++) {
var css = $('#theme_' + themes[i]);
if (css.length != 0) {
$(css).prop('disabled', true);
}
}
}
function switch_theme(theme) {
var theme_css = $('#theme_' + theme);
if (theme_css.length != 0) {
$(theme_css).removeAttr('disabled');
}
else {
theme_css = $('<link rel="stylesheet" type="text/css">')
.attr('href', theme + '.css')
.attr('id', 'theme_' + theme);
$('head').append(theme_css);
}
set_cookie('user_selected_theme', theme, 365);
}
function set_cookie(cookie_name, cookie_value, lifespan_in_days, valid_domain) {
// http://www.thesitewizard.com/javascripts/cookies.shtml
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '';
document.cookie = cookie_name +
"=" + encodeURIComponent(cookie_value) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string;
}
function get_cookie(cookie_name) {
// http://www.thesitewizard.com/javascripts/cookies.shtml
var cookie_string = document.cookie;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match(
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)');
return decodeURIComponent(cookie_value[2]);
}
return '';
}
</script>
</head>
<body>
<a class="theme_switch" id="black">Black</a>
<a class="theme_switch" id="blue">Blue</a>
<a class="theme_switch" id="red">red</a>
</body>
</html>

[bitcob589]

قسمت سرورشو با php نوشتم ولی فکر نکنم تو تبدیلش مشکلی داشته باشین چیزه سادییه
اگر امکان دارد با C#‎‎ بنویسید

[bftarane]

..........................................

[exlord]

اگر امکان دارد با C#‎‎ بنویسید
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpCookie user_selected_theme = Request.Cookies["user_selected_theme"];
if (user_selected_theme != null)
{
HtmlGenericControl css = new HtmlGenericControl();
css.TagName = "link";
css.Attributes.Add("type", "text/css");
css.Attributes.Add("rel", "stylesheet");
css.Attributes.Add("href", "themes/" + user_selected_theme.Value + ".css");

css_theme.Controls.Add(css);
}
}
}
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<asp:PlaceHolder ID="css_theme" runat="server"></asp:PlaceHolder>
<title></title>
<script type="text/javascript" src="jquery.1.7.2.js"></script>
<script type="text/javascript">
var themes = ['black', 'blue', 'red'];
$(document).ready(function () {
$('.theme_switch').click(function () {
disable_themes();
switch_theme($(this).attr('id'));
});
});
function disable_themes() {
for (var i = 0; i < themes.length; i++) {
var css = $('#theme_' + themes[i]);
if (css.length != 0) {
$(css).prop('disabled', true);
}
}
}
function switch_theme(theme) {
var theme_css = $('#theme_' + theme);
if (theme_css.length != 0) {
$(theme_css).removeAttr('disabled');
}
else {
theme_css = $('<link rel="stylesheet" type="text/css">')
.attr('href', 'themes/'+ theme + '.css')
.attr('id', 'theme_' + theme);
$('head').append(theme_css);
}
set_cookie('user_selected_theme', theme, 365);
}
function set_cookie(cookie_name, cookie_value, lifespan_in_days, valid_domain) {
// http://www.thesitewizard.com/javascripts/cookies.shtml
var domain_string = valid_domain ?
("; domain=" + valid_domain) : '';
document.cookie = cookie_name +
"=" + encodeURIComponent(cookie_value) +
"; max-age=" + 60 * 60 *
24 * lifespan_in_days +
"; path=/" + domain_string;
}
function get_cookie(cookie_name) {
// http://www.thesitewizard.com/javascripts/cookies.shtml
var cookie_string = document.cookie;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match(
'(^|;)[\s]*' +
cookie_name +
'=([^;]*)');
return decodeURIComponent(cookie_value[2]);
}
return '';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="theme_switch" id="black">Black</a>
<a class="theme_switch" id="blue">Blue</a>
<a class="theme_switch" id="red">red</a>
</div>
</form>
</body>
</html>

[bitcob589]

یک سوال مبتدی:
در کد بالا از کوکی استفاده است آیا هکر ها می توانند با دستکاری درون کوکی می توانند به سایت آسیب برسانند

[s.hoseinpoor]

کوکی شامل اطلاعات بی ارزشه!
مثلا چی میشه اگه منه هکر بیام کوکی تم سایتی که رو سیستمم لود شده رو تغییر بدم! فوقش رنگش میپره! یام لود نمیشه...

[ahmad156]

دوست عزیز شما وقتی گزینه "مرا به خاطر بسپار" در صفحه ورود سایت مورد نظر(مثلا yahoo) رو انتخاب میکنین و دفعه بعد شما رو به صفحه login نمیفرسته فکر میکنین کجا ذخیره میشه این اطلاعات که دوباره شما رو میشناسه؟
اگر کسی به این کوکی شما دسترسی داشته باشه خب .......