This is a migrated thread and some comments may be shown as answers.

How to replace a header by another one

1 Answer 139 Views

NavBar

This is a migrated thread and some comments may be shown as answers.

guillaume asked on 18 Oct 2013, 02:17 PM

Hi guys,

i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery

here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Demo</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/index.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<!--

Contenu des pages chargées par le paneau left

-->

<body>

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">

</div>

<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">

</div>

<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">

</div>

<!--

// Paneau Left

-->

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">

<ul data-role="listview" data-type="group">

<li>Menu

<ul>

<li><a href="#drawer-home" data-transition="none">m1</a></li>

<li><a href="#drawer-starred" data-transition="none">m2</a></li>

<li><a href="#drawer-drafts" data-transition="none">m3</a></li>

</ul>

</li>

</ul>

</div>

<!--

Headers

-->

<div class="Head" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div class="" data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<span id="compagnyName">Demo</span>

<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>

</div>

</header>

</div>

<div class="HeadSearching" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />

<select name="country" id="country" data-align="right">

<option>France</option>

<option>Angleterre</option>

<option>Luxembourg</option>

<option>Espagne</option>

</select>

</div>

</header>

</div>

<script>

var app = new kendo.mobile.Application(document.body);

$('.HeadSearching').remove();

</script>

<script>

function changeHead()

{

alert('header replace');

$('.head').replaceWith('.HeadSearching');

}

</script>

</body>

</html>

if someone could help me doing this correctly ..
thanks by advance ;)

How to replace a header by another one

1 Answer, 1 is accepted