MVC mobile page title is changing to null/empty - html

I have a mobile web site used with MVC 4.0 Razor Mobile version and HTML 5. When i call a page on browser or submit form page title not shown. Also it comes in view but after 1 second, it is going to null. When clicking a url in page title is coming. How can I stop changing page title to empty?
My layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Html.Raw(ViewBag.Title)</title>
<meta name="description" #Html.Raw("content=\"" + ViewBag.Description + "\"") />
<meta name="keywords" #Html.Raw("content=\"" + ViewBag.Keywords + "\"") />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.4.0.min.css" />
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
#RenderSection("scripts", required: false)
<script src="~/Scripts/myjs.js" type="text/javascript"></script>
<link href="/Content/mycss.css" rel="stylesheet"/>
</head>
<body>
<div data-role="page" data-theme="a" id="layout-page">
<div data-role="header" >
<h1>
<a style="background:none;border:none;" href="http://m.sozcukcevir.com"><img style="height:40px;border:0" src="/Content/images/logo-mobile.png" alt="sözcük çevir" /></a> </h1>
Menu
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
<ul data-role="listview" data-inset="true">
<li>Kelime Çeviri</li>
<li>Metin Çeviri</li>
<li data-icon="audio">Okunuşu Dinle</li>
<li data-icon="gear">Ayarlar</li>
<li data-icon="delete">Kapat</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="c">
<ul data-theme="c">
<li data-theme="c">Sözlük</li>
<li data-theme="c">Metin Çeviri</li>
<li data-theme="c">Dinle</li>
</ul>
</div>
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<!-- analytics --><!-- analytics -->
</body>
</html>
Page : http://m.sozcukcevir.com

Related

Reveal.js – Remove globally set footer from single slide

I'm making my first reveal.js presentation and have set a global footer in the body of the html file. I would like to remove the footer for a single slide, however, I cannot figure out how to do that.
Below is my current file, with the footer at the end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<meta
name="description"
content="DESCRIPTION"
/>
<meta name="author" content="MY NAME" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<a href="https://example.com/">
<img
src="images/example.png"
alt="Example logo"
style="
height: 360px;
margin: 0 auto 4rem auto;
background: transparent;
"
class="logo"
/>
</a>
<h4>Title of my presentation</h4>
<p style="font-size: 30px">
Subtitle
</p>
</section>
<section>
<section class="center">
<h2>What goes here?</h2>
</section>
<section class="center">
<p>Lorem ipsum dolor sit amet</p>
</section>
<section class="center">
<pre>
<code>
Here is the code
</code>
</pre>
</section>
</section>
</div>
</div>
<!-- Default plugins -->
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [
RevealZoom,
RevealNotes,
RevealSearch,
RevealMarkdown,
RevealHighlight,
],
});
</script>
<!-- 1. Create hidden footer <div> -->
<div id="hidden" style="display:none;">
<div id="footer">
<div id="footer">Copyright 2022</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
var footer = $('#footer').html();
$('div.reveal').append(footer);
</script>
</body>
</html>
Any tips or suggestions would be greatly appreciated!
First, you have a comment that says
On Reveal.js ready event, copy footer
but I can't see that in your code. To me, it seems like a plain append.
Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:
Reveal.on( 'slidechanged', event => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...

Ktor | How to connect FreeMaker-Templates with Image?

Hello everyone,
I just started learing Kotlin and Ktor for Web Development. I started creating a Template and everything worked perfectly but now I want to add an image to my Templates. In the Kotlin Docs they created a static route but it doesn't work:
Template:
<#macro layout>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Document -->
<title>${pageName.name} | Test</title>
<meta name="description" content="This is the official website of. ">
<meta name="keywords" content="web, ...">
<meta name="author" content="">
<link rel="shortcut icon" href="img/favicon.ico"/>
<!-- Document -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="main-picture">
<div class="header">
<div class="img">
<img alt="Logo" width="60px" height="auto" src="image/logo.png">
</div>
<div class="toggle-button">
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</div>
<nav class="navbar">
<ul>
<li>Home</li> <!-- Home -->
<li>Concept</li> <!-- Concept -->
<li>Offers</li> <!-- Offers -->
<li>About Us</li> <!-- AboutUS -->
</ul>
</nav>
</div>
</div>
</header>
<main>
<#nested>
</main>
<footer>
<div class="footer-gen">
<div class="footer">
Imprint <!-- Imprint -->
Privacy Policy <!-- Privacy -->
Conditions <!-- Conditions -->
</div>
<div class="footer-name">
<p>© 2022 - vision2success</p>
</div>
</div>
</footer>
</body>
</#macro>
Routing
import io.ktor.http.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*
import io.ktor.server.response.*
import io.ktor.server.routing.*
fun Application.imgRouting() {
routing {
get("/") {
call.respondRedirect("images")
}
route("images") {
get("/favicon.ico") {
call.respond(
FreeMarkerContent(
"img/favicon.ico",
model = null,
contentType = ContentType.Image.Any
)
)
}
get("/logo.png") {
call.respond(
FreeMarkerContent(
"logo.png",
model = null,
contentType = ContentType.Image.PNG
)
)
}
}
}
}
Error:
The http://localhost:8080/images/logo.png graphic cannot be displayed because it contains errors.
NK

what is equivalent layout (asp.net core) in spring?

i am beginner in the spring and i try to create a simple layout with child view in the spring using hibernate.
but i can't understand how to create it.
please help me.:D
simple layout in asp.net core
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>ProDent - Dentist Template</title>
<meta charset="UTF-8" />
<meta name="description" content="ProDent dentist template" />
<meta name="keywords" content="prodent, dentist, creative, html" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link href="/img/favicon.ico" rel="shortcut icon" />
<link href="~/css/fontiran.css" rel="stylesheet" />
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />
<!-- Stylesheets -->
<link href="~/css/persianDatepicker-default.css" rel="stylesheet" />
<link href="~/css/RegistrationStyles.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/flaticon.css" />
<link rel="stylesheet" href="/css/owl.carousel.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/animate.css" />
<!-- rtl -->
<link rel="stylesheet" href="/css/rtl.css" />
#RenderSection("StylesOnViews", false) <!--here rendering styles on child views-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Page Preloder End -->
<!-- Header section -->
#(await Component.InvokeAsync("HeaderSiteComponent"))
<!-- Header section end -->
#RenderBody() <!--here rendering child view-->
<!-- Footer top section -->
#(await Component.InvokeAsync("footerSiteComponent"))
<!-- Footer top section end -->
<!--====== Javascripts & Jquery ======-->
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/circle-progress.min.js"></script>
<script src="/js/main.js"></script>
<script src="~/js/FactsScripts.js"></script>
<script src="~/js/persianDatepicker.js"></script>
#RenderSection("ScriptsOnViews", false) <!-- here rendering scripts on child views -->
</body>
</html>
and my child view :
all of this html file replaced with #RenderBody in layout
#{
ViewData["Title"] = "Login";
Layout = "~/Views/Shared/_defaultLayout.cshtml";
}
<section class="page-info-section set-bg" data-setbg="img/page-info-bg/1.jpg">
<div class="container">
<h2 class="text-center">ورود کاربران</h2>
</div>
</section>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-form-title" style="background-image: url(img/dentists.jpg);">
<span class="login100-form-title-1">ورود کاربران</span>
</div>
<form class="login100-form validate-form">
<div class="wrap-input100 validate-input m-b-26" data-validate="لطفا نام کاربری خود را وارد کنید!">
<span class="label-input100">نام کاربری</span>
<input class="input100" type="text" name="username" placeholder="نام کاربری خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-18" data-validate="لطفا رمز عبور خود را وارد کنید!">
<span class="label-input100">رمز عبور</span>
<input class="input100" type="password" name="pass" placeholder="رمز عبور خود را وارد کنید">
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-b-30 text-right" dir="rtl">
<div>
رمز عبور خود را فراموش کرده اید؟
</div>
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">مرا بخاطر بسپار</label>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">وارد شوید</button>
</div>
</form>
</div>
</div>
</div>
#(await Component.InvokeAsync("HeaderSiteComponent"))
and
#(await Component.InvokeAsync("footerSiteComponent"))
in the layout are header(menu items and..etc) and footer.
menu items in the header component load form dataBase and also i can send data to this component..
what is this equivalent in spring?
i found answer this question :
for create a layout or component i should create fragment in spring using thymeleaf.
for example :
1-create footer html file and called footer.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footer">
<p>your content....</p>
</footer>
</body>
</html>
notice : only attention to footer tag because only footer will be
insert into homePage moreover you should call footer by name that put front th:fragment
2- now you may call footer in homePage.
see following code :
<body>
...
<div th:insert="fragments/footer :: footer"></div>
</body>
more information :
https://attacomsian.com/blog/thymeleaf-fragments#:~:text=A%20fragment%20in%20Thymeleaf%20is,repeated%20used%20on%20multiple%20pages.
In your opinion, you should first define a fragment and then set the output format with the following code
<body>
<div th:insert="fragments/components :: header"></div>
<div th:replace="fragments/components :: header"></div>
<div th:include="fragments/components :: header"></div>
</body>

My text is going under my header?

So I am new to html coding and am trying to just make a simple portfolio and I want it to look nice so I have been looking at tutorial websites online however I did something weird and I don't know what I did. If anyone could help me with this issue that would be great.
Screenshot:
The Code Is Below (https://pastebin.com/GDCW2jsu):
<!DOCTYPE html>
<html>
<head>
<title>Ryan Cole Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html"><border>Ryan Cole Home</border>
</a></h1>
<nav>
About Me
Portfolio
Contact Me
</nav>
</header>
<!-- Welcome To The Homepage -->
<footer>
<p>Welcome To The Homepage</p>
</footer>
</body>
</html>
<!-- Scripts -->
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js">
</script><![endif]-->
<script src="assets/js/main.js"></script>
</div>
</body>
</html>

How To Determine Active Div / Panel in JqMobi/AppFramework

I'm on a phonegap project.
I was doing this project with Jquery Mobile Framework. But its results and performance arre so bad at many devices (f.e. my device android 2.3.3 - jquery mobile works nice on android 4.x.x devices i think)
After that, i found this nice and fast framework.
Now, i'm trying to carry my jquery mobile project to Jqmobi.
But there are some problems when i'm trying to carry. I am stucked with the function that i need to show current/active/chosen/opened panel when i click from the navigation.
Why do i need this. Because, "i want to work the functions when the user chooses that panel" that is what i want.
Here is what i have tried in jqmobi;
HTML SIDE ;
<!DOCTYPE html>
<html>
<head>
<title>Live Score</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/jq.ui.css" />
<link rel="stylesheet" type="text/css" href="css/add.css" />
<script type="text/javascript" charset="utf-8" src="js/jq.ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jq.mobi.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myscripts.js"></script>
</head>
<body>
<div id="jQUi">
<div id="content">
<div title="Home" id="index" class="panel" selected="true">
<img src="img/fanatik.jpg" width="320" height="120" alt="">
<ul class="index_list">
<li><span>Football </span>Live Scores</li>
<li><span>Football </span>League Tables</li>
<li><span>Football </span>League Fixtures</li>
<li><span>Program </span>Settings</li>
</ul>
</div>
<!---------------------------------------------------------------------------------------------------->
<div title="LiveScores" id="contents01" class="panel" scrolling="no">
</div><!-- livescores page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueTables" id="contents02" class="panel">
</div><!-- leaguetable page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueFixtures" id="contents03" class="panel">
</div><!-- leaguefixture page -->
<!---------------------------------------------------------------------------------------------------->
<div title="Settings" id="contents04" class="panel">
</div><!-- settings page -->
<!---------------------------------------------------------------------------------------------------->
</div>
<div id="navbar">
home
live
tables
fixtures
settings
</div>
<!---------------------------------------------------------------------------------------------------->
</div>
</body>
</html>
Javascript Side (not working)
$(document).bind('pageshow', function () {
var id = $.ui.activeDiv[0].id;
if (id=="contents01"){
ctx="livescores";
$("#contents01 [class='panel']").text(ctx);
}
else
if (id=="contents02"){
ctx="leaguetables";
$("#contents02 [class='panel']").text(ctx);
}
else
if (id=="contents03"){
ctx="leaguefixtures";
$("#contents03 [class='panel']").text(ctx);
}
});
function getLiveMatches(){
$.getJSON("MY WEB API URL", function (data){
ctx='<ul>';
$.each(data, function (index, value) {
ctx+="<li><table border='1' class='imagetable'><tr><td rowspan='3' width='18%'>" + value.MinuteOrShortStatus + "</td><td>" + value.HomeTeam.Name + "</td><td width='8%'>" + (value.CurrentHomeTeamScore == null ? "-" : value.CurrentHomeTeamScore) + "</td></tr><tr><td>" + value.AwayTeam.Name + "</td><td width='8%'>" + (value.CurrentAwayTeamScore == undefined ? "-" : value.CurrentAwayTeamScore) + "</td></tr></table></li>";
});
ctx+='</ul>';
injectContext("contents01",ctx);
});
}
function injectContext(target, context){
$("#"+target+" [class='panel']").html(context);
}
How can i determine the active panel or page or div in Jqmobi / Appframework..
Please help about it.
Thanks.
You can run a function whenever a panel becomes active.
Add the attribute data-load="func_name" to the panel's div tag.
For Example
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
...
<script>
function onPanel1Activated() {
do task for panel1
}
function onPanel2Activated() {
do task for panel2
}
</script>
...
</head>
<body>
<div id="afui" class='ios'>
<!-- Header ------------------------------------------------------->
<div id="header"></div>
<!-- Content Start ------------------------------------------------>
<div id="content">
<!-- Panel 1 -------------------------------------------------->
<div class="panel" title="Panel 1" id="panel1" selected="true" data-load="onPanel1Activated">
...
</div>
<!-- Panel 2 -------------------------------------------------->
<div class="panel" title="Panel 2" id="panel2" data-load="onPanel2Activated">
...
</div>
...
</div>
</div>
</body>
</html>