I am facing one problem, I want to do something like this:
I want to toggle the EXTERNAL CSS when user is click on toggle button.
There are 5 different pages; there are:
Header
Footer
Main page
Contact us
About us
and I have 2 external style sheets:
style.css
style1.css
By default style.css is loaded.
Now when I click on toggle button then style1.css has to load, and when again click on toggle button style.css has to load and visa verse. I want to do something like this.
Is there anyone have an Idea regarding this. Please help me out!
CSS is loaded on header so when I click on toggle button I want to apply new style.css.
the problem i am facing is that when i am clicking on any other page at that time the default css is set but in my case i don't want that By default style.css is loaded now when user click on button style1.css is loaded now when user again click on button style.css is loaded when click again style1.css loaded and again style.css loaded i want to do something like this and this changes should be there for whole website of main! thnx for your valuable reply and wait for more accurate –
By doing something like this:
$("a").click(function () {
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
});
See Applying stylesheets dynamically with jQuery
DEMO
See Stylesheet Switcher jQuery
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
if ($.cookie("css")) {
$("link").attr("href", $.cookie("css"));
}
$(document).ready(function () {
$("#nav li a").click(function () {
$("link").attr("href", $(this).attr('rel'));
$.cookie("css", $(this).attr('rel'), { expires: 365, path: '/' });
return false;
});
});
</script>
<ul id="nav">
<li>Original CSS</li>
<li>Larger Text</li>
<li>Something Different</li>
</ul>
try this
$("#btntoggle").click(function(){
if($("LINK[href*='style.css']").lenght() > 0){
$("LINK[href*='style.css']").remove();
addCss(path + "style1.css");
}else{
$("LINK[href*='style1.css']").remove();
addCss(path + "style.css");
}
});
function addCss(path){
var headID = $("head").get(0);
var newCss = document.createElement('LINK');
newCss.rel = 'StyleSheet';
newCss.type = 'text/css';
newCss.href= path;
newCss.media = 'screen';
headID.appendChild(newCss);
}
Note that i've added the default style sheet in the markup, in case the user got JS disabled. So you get some kind of a fallback.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script>
$(function(){
$("#change").click(function(){
$('head link').each(function(){
if($(this).attr('rel') == "stylesheet"){
if($(this).attr('href') == "style1.css"){
$(this).attr("href","style2.css");
} else {
$(this).attr("href","style1.css");
}
}
});
});
});
</script>
</head>
<body>
<button id="change">Change</button>
</body>
</html>
$url = Mage::helper("core/url")->getCurrentUrl(); // $url contain your current url
if(!isset($_SESSION['cssfile']) and !isset($_GET['l']))
{
/*$urlArr = explode("?",$url);
$tmpUrl = $urlArr[0];
$tmpUrl .= "?";
$andP = '';
$i=1;
for(;$i<count($urlArr);$i++)
{
$tmpUrl .= $andP.$urlArr[$i];
$andP = '&';
}
if($i>1)
$tmpUrl .= '&l=1';
else
$tmpUrl .= 'l=1';*/
//$urlGet = $tmpUrl;//$url."?l=0";
$_SESSION['cssfile'] = '1';
}
if(isset($_GET['l']) and $_GET['l']==0)
{
// $urlGet = $url."?l=1";
$_SESSION['cssfile'] = '0';
}
else if(isset($_GET['l']) and $_GET['l']==1)
{
// $urlGet = $url."?l=1";
$_SESSION['cssfile'] = '1';
}
if(isset($_SESSION['cssfile']))
{
$urlArr = explode("?",$url);
$tmpUrl = $urlArr[0];
$tmpUrl .= "?";
$andP = '';
$found = 0;
//for($i=1;$i<count($urlArr);$i++)
foreach($_GET as $key => $val)
{
if($key == 'l')
{
$found = 1;
if($val == 1)
$val = 0;
else
$val = 1;
}
$tmpUrl .= $andP.$key.'='.$val;
$andP = '&';
}
if($found == 0 && count($_GET)>0)
if($_SESSION['cssfile'] ==1)
$tmpUrl .= '&l=0';
else
$tmpUrl .= '&l=1';
else if($found == 0 && count($_GET)==0)
if($_SESSION['cssfile'] ==1)
$tmpUrl .= 'l=0';
else
$tmpUrl .= 'l=1';
$urlGet = $tmpUrl;
}
/*if(isset($_SESSION['cssfile']) and $_SESSION['cssfile'] == 'styles1.css' )
{
$_SESSION['cssfile'] = 'styles.css';
$_SESSION['cssfile']
}
else
{
$_SESSION['cssfile'] = 'styles1.css';
}*/
//echo '--'.$_SESSION['cssfile'];
if($_SESSION['cssfile'] ==1){
?>
<link href="<?php echo $this->getSkinUrl()?>css/styles1.css" rel="stylesheet" type="text/css" id="style" />
<?php }else{ ?>
<link href="<?php echo $this->getSkinUrl()?>css/styles.css" rel="stylesheet" type="text/css" id="style" />
<?php } ?>
Related
controller: welcome.php
public function lookup()
{
$keyword = trim($_GET['term']);
$data['response'] = 'false';
$query = $this->Main_tutorial->lookup($keyword);
print_r($query);
if( ! empty($query) )
{
$data['response'] = 'true';
$data['message'] = array();
$data['auto_com'] = array();
foreach( $query as $row )
{
$data['message'][] = array('tutorial_name' => $row['tutorial_name']);
$data['auto_com'][] = $row['tutorial_name'];
}
}
if('IS_AJAX')
{
echo json_encode($data['auto_com']);
}
else
{
$this->load->view('index',$data);
}
}
view: index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>resource/css/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
</head>
<body>
<input type="text" class="search-bg__text" name="tutorial_name" id="tutorial_name">
<script src="<?php echo base_url(); ?>resource/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#tutorial_name").autocomplete({
source:"<?php echo base_url(); ?>welcome/lookup",
minLength:1,
select:function(b,c)
{
var a=c.item.value;
a=encodeURIComponent(a);
location.href=a+"-tutorial";
return false
}
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
</body>
</html>
model: Main_tutorial.php
public function lookup($keyword)
{
$this->db->select('tutorial_name')->from('tutorial');
$this->db->like('tutorial_name',$keyword,'after');
$query = $this->db->get();
$result = $query->result_array();
return $result;
}
In this code I want to create an autocomplete suggestion box using codeigniter. Now what happen when I write something inside the tutorial_name input field and inspect the element then select network and click on link it show me the output but can't see on display I don't know why ?. So how can I fix this issue ?Please help me.
Thank You
In autocomplete() you need output as json format. Here you are printing json data with echo json_encode($data['auto_com']); But before it you are also displaying data print_r($query);. Which create invalid json output. so you have to remove it. Also note that your if('IS_AJAX') will always become true
public function lookup()
{
$keyword = trim($_GET['term']);
$data['response'] = 'false';
$query = $this->Main_tutorial->lookup($keyword);
if( ! empty($query) )
{
$data['response'] = 'true';
$data['message'] = array();
$data['auto_com'] = array();
foreach( $query as $row )
{
$data['message'][] = array('tutorial_name' => $row['tutorial_name']);
$data['auto_com'][] = $row['tutorial_name'];
}
}
if('IS_AJAX') //This condition always become true
{
echo json_encode($data['auto_com']);
}
else
{
$this->load->view('index',$data);
}
}
I have write a protocol handler to launch the Cisco Jabber Device. Following is my code.
<input onclick="javascript:window.location.href = 'movi:12345'
type="button" value="Launch" />
It launch the Cisco Jabber if it installed on client machine. But I want to show warning and download URL if not installed. How it is possible?
Following HTML file should serve your purpose, make sure that you change the jQuery source file link to suite your own need (within the head tag):
<html>
<head>
<script type='text/javascript' src='jquery-1.5.1.js'></script>
<script type='text/javascript'>
var protocolCheckerTimer = false;
var installerSites = [];
var currentProtocol = false;
var protocolFound = false;
var poppingUp = false;
$(document).ready(function (e){
$(window).bind('blur', interceptProtocolStartup);
$(document).bind('focusout', interceptProtocolStartup);
installerSites['movi'] = 'https://supportforums.cisco.com/docs/DOC-23292';
installerSites['sip'] = 'http://www.linphone.org/eng/download/packages/';
installerSites['skype'] = 'http://www.skype.com/en/download-skype/skype-for-computer/';
installerSites['glow'] = 'http://www.glowpoint.com';
$('a.protoco_handler').click(function (e) {
var sUrl = $(this).attr('href');
var urlComponents = sUrl.split(':');
currentProtocol = urlComponents[0];
log('checking protocol for ' + currentProtocol);
protocolCheckerTimer = setTimeout(waitForProtocolHandler, 200);
$('#hidIFrame').attr('src', sUrl);
return false;
});
});
function waitForProtocolHandler() {
if (protocolFound === true) {
resetAll();
return;
}
poppingUp = true;
if (confirm('Handler for protocol ' + currentProtocol + ' not found. Would you like to install?')) {
log('opening installer site ' + installerSites[currentProtocol] + ' for protocol ' + currentProtocol);
window.open(installerSites[currentProtocol]);
}
resetAll();
}
function resetAll() {
protocolFound = false;
currentProtocol = false;
if (protocolCheckerTimer !== false) {
clearTimeout(protocolCheckerTimer);
protocolCheckerTimer = false;
}
poppingUp = false;
}
function interceptProtocolStartup() {
if (poppingUp === true) {
return;
}
log('protocol found, clearing timeout');
resetAll();
}
function log(msg) {
if (window.console) {
console.log(msg);
}
}
</script>
</head>
<body>
<ul>
<li><a class='protoco_handler' href='movi:100001#ovcloud.com'>Launch Jabber</a></li>
<li><a class='protoco_handler' href='sip:azam#ovcloud.com'>Launch Cisco</a></li>
<li><a class='protoco_handler' href='skype:mdaliazam'>Launch Skype</a></li>
<li><a class='protoco_handler' href='glow:azam#ovcloud.com'>Launch Glowpoint :)</a> </li>
</ul>
<iframe id='hidIFrame' style='display:none'></iframe>
</body>
</html>
I have 2 hyperlinks.
when i click on one hyperlink the another hyperlink should be disabled means it should be seen but not clicked by any user
Please help me
hiii
<a id="check" href="google.com">bye</a>
in JavaScript
$('#check').attr('disabled', true);
but it is not working
Using java script you can disable the hyper link by adding a .disabled class as seen below:
.inactive //add this class to the link if you want to disable it
{
pointer-events: none;// this will disable the link
cursor:default;
}
then use .inactive class in appropriate line...
Try below
$('.my-link').click(function () {return false;});
To re-enable it again, unbind the handler:
$('.my-link').unbind('click');
or
$('.my-link').attr('disabled', 'disabled');
Use this to re-enable it:
$('.my-link').attr('disabled', '');
Thanks,
Siva
Below is the code you need.
<a id="gLink" href="http://google.com">click me</a><br />
<a onclick="disableLink()" href="#">Disable link</a><br />
<a onclick="enableLink()" href="#">Enable link</a>
javsacript functions:
function disableLink() {
var a = document.getElementById('gLink');
a.href = "#";
}
function enableLink() {
var a = document.getElementById('gLink');
a.href = "http://google.com";
}
for e.g if you have
<a id="link1" href="page1.php">One</a> <a id="link2" href="page2.php">Two</a>
document.getElementById('link1').onclick = function()
{
document.getElementById('link1').disabled = true;
document.getElementById('link2').disabled = false;
};
document.getElementById('link2').onclick = function()
{
document.getElementById('link1').disabled = false;
document.getElementById('link2').disabled = true;
};
That's all I know
<html>
<head>
<script language="javascript" type="text/javascript">
window.onload = firstLoad;
function firstLoad() {
document.getElementById("lesson").href = "";
document.getElementById("posttest").href = "";
}
function clickHome() {
document.getElementById("pretest").href = "";
document.getElementById("lesson").href = "lesson.html";
}
function lessonRead() {
document.getElementById("posttest").href = "posttest.html";
document.getElementById("lesson").href = "";
}
</script>
</head>
<body>
Home |
Pre-test |
Lesson |
Post-test |
About |
</body>
</html>
You can use jQuery onClick event (or .on("click") / .live("onClick") or whatever you prefer) to change to attribute of the link like this:
$('.my-link').attr('disabled', true);
Short example:
<a href='#' id='link1'>First</a>
<a href='#' id='link2'>Second</a>
<script>
$("#link2").onClick(function(){
$('#link1').attr('disabled', true);
};
}
</script>
I want to know how can i add some script (javascript or maybe in PHP) to look for ip address and if ip is for sweden change the language of the website to Swedish , maybe change the location example.com/en to example.com/se or something like that ,
Thanks
You want do what's known as GeoLocation
You could do this with MaxMind's database and then process this in either your PHP app or as an Apache Module.
I'd advise that you recommend a language/locale option to users when they visit the site but ultimately allow them to override this.
Look at the browsers accept-language header first, then the browser identification string which might contain the OS language.
function getDefaultLanguage() {
if (isset($_SERVER["HTTP_ACCEPT_LANGUAGE"]))
return parseDefaultLanguage($_SERVER["HTTP_ACCEPT_LANGUAGE"]);
else
return parseDefaultLanguage(NULL);
}
function parseDefaultLanguage($http_accept, $deflang = "en") {
if(isset($http_accept) && strlen($http_accept) > 1) {
# Split possible languages into array
$x = explode(",",$http_accept);
foreach ($x as $val) {
#check for q-value and create associative array. No q-value means 1 by rule
if(preg_match("/(.*);q=([0-1]{0,1}\.\d{0,4})/i",$val,$matches))
$lang[$matches[1]] = (float)$matches[2];
else
$lang[$val] = 1.0;
}
#return default language (highest q-value)
$qval = 0.0;
foreach ($lang as $key => $value) {
if ($value > $qval) {
$qval = (float)$value;
$deflang = $key;
}
}
}
return strtolower($deflang);
}
Not sure if it's a good idea or not, but heres how you'd do it:
$(function() {
$.getJSON('http://smart-ip.net/geoip-json?callback=?', function(data) {
if (data.countryCode == 'SE') {
$('body').text('Välkommen till Sverige');
}else{
$('body').text("You're not Swedish ?");
}
});
});
FIDDLE
Without jQuery, I guess the easiest would just be:
<script type="text/javascript">
var lang = function(data) {
if (data.countryCode == 'SE') {
//swedish
} else {
//not swedish
}
}
</script>
<script type="text/javascript" src="http://smart-ip.net/geoip-json?callback=lang"></script>
or in PHP ?
<?php
$json = json_decode( file_get_contents('http://smart-ip.net/geoip-json') );
if ($json->countryCode == 'SE') {
//swedish
}else{
//not swedish
}
?>
Shortly, based on pure JavaScript, you can do...
<html>
<head>
<title>...</title>
<script language="JavaScript">
var lang = navigator.language || navigator.userLanguage;
//alert(lang);
if(lang == "en" || lang == "eng" || lang == "engs") {
window.location = "en/index.html"; //English
}
if(lang == "sv" || lang == "swe") {
window.location = "se/index.html"; //Swedish
}
</script>
</head>
<body>
</body>
</html>
I try to do a simple image slideshow in php (just cycle images, no links, no other effects).
after some googling I found the following in net:
<HTML>
<HEAD>
<TITLE>Php Slideshow</TITLE>
<script language="javascript">
var speed = 4000; // time picture is displayed
var delay = 3; // time it takes to blend to the next picture
x = new Array;
var y = 0;
<?php
$tel=0;
$tst='.jpg';
$p= "./images";
$d = dir($p);
$first = NULL;
while (false !== ($entry = $d->read())) {
if (stristr ($entry, $tst)) {
$entry = $d->path."/".$entry;
print ("x[$tel]='$entry';\n");
if ($first == NULL) {
$first = $entry;
}
$tel++;
}
}
$d->close();
?>
function show() {
document.all.pic.filters.blendTrans.Apply();
document.all.pic.src = x[y++];
document.all.pic.filters.blendTrans.Play(delay);
if (y > x.length - 1)
y = 0;
}
function timeF() {
setTimeout(show, speed);
}
</script>
</HEAD>
<BODY >
<!-- add html code here -->
<?php
print ("<IMG src='$first' id='pic' onload='timeF()' style='filter:blendTrans()' >");
?>
<!-- add html code here -->
</BODY>
</HTML>
but it displays only the first image from the cycle. Do I something wrong?
the resulting HTML page is:
<HTML>
<HEAD>
<TITLE>Php Slideshow</TITLE>
<script language="javascript">
var speed = 4000; // time picture is displayed
var delay = 3; // time it takes to blend to the next picture
x = new Array;
var y = 0;
x[0]='./images/under_construction.jpg';
x[1]='./images/BuildingBanner.jpg';
x[2]='./images/littleLift.jpg';
x[3]='./images/msfp_smbus1_01.jpg';
x[4]='./images/escalator.jpg';
function show() {
document.all.pic.filters.blendTrans.Apply();
document.all.pic.src = x[y++];
document.all.pic.filters.blendTrans.Play(delay);
if (y > x.length - 1)
y = 0;
}
function timeF() {
setTimeout(show, speed);
}
</script>
</HEAD>
<BODY >
<!-- add html code here -->
<IMG src='./images/under_construction.jpg' id='pic' onload='timeF()' style='filter:blendTrans()' ><!-- add html code here -->
</BODY>
</HTML>
I recommend you to use a ready made javascript framework, such as jQuery
As I remember, I used this: jQuery Cycle Plugin
I'm working on a jquery based slideshow plugin. You can add more images to the slideshow as the slideshow progresses.. it is in beta version.
http://smg-solutions.com