Why my tooltip not working :(? I'm checking it 2 hours and i don't have any mind.
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
$('.changebk a').tooltip({
content: '<img src="img/logom.png" alt="Here it;s me">'
}); // koniectoltip
you should add title in your html code inside
<div class="changebk">
<ul>
<li class="box">
<img src="img/facebook.png">
</li >
<li class="box">
<img src="img/twiiter.png">
</li>
<li class="box">
<img src="img/logom.png">
</li>
</ul>
</div>
see the example here https://jsfiddle.net/ct6vrao8/
Related
I have created a common layout for my views, so i put it in the shared folder.
launching the project the index method of the controller trigger and return me the layout with all the images, however when i click on an item in the navbar,which trigger the appropriate an action method,the images from the layout disappear !?
this is my Tag Helpers in the Layout :
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav">
<li class="nav-item navbar1 ">
<a class="nav-link" asp-controller="Home" asp-action="Index"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="WhoWeAre"><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="Privacy"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
and those are the action methods :
public IActionResult Index()
{
return View("WhoWeAre");
}
public IActionResult WhoWeAre()
{
return View();
}
public IActionResult ContactUs()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
M i doing something wrong ?
Update1:
for the image i have a logo in the navbar :
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav">
<li class="nav-item navbar1 ">
<a class="nav-link" asp-controller="Home" asp-action="Index"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="WhoWeAre"><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" asp-controller="Home" asp-action="Specialites"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<!-- this is the logo-->
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">....
and in the footer , i have the logo again and some other images:
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>......
Your image source is relative. MVC uses routing, which makes your URL paths look like "folders".
So "Home" is /, which is the default route, but "Who we are" is /Home/WhoWeAre. This causes the images to be looked up in respectively /images/decoupage/logo-white.png and /Home/images/decoupage/logo-white.png.
Given the images are in the root folder, and not in /Home, you need to prefix your image URLs with /.
I use this code for my slider in my view
but I want to show the last 3 items
<div class="flexslider">
<ul class="slides">
#foreach (var item in ViewBag.blog)
{
<li>
<a href="#">
<img src="#item.postImage" width="100%" alt="PostImage" style="margin-bottom: 10px;" />
<p class="flex-caption">#item.postTitle</p>
</a>
</li>
}
</ul>
</div>
<div class="flexslider">
<ul class="slides">
#foreach (var item in ((List<your Model>)ViewBag.blog).Skip(((List<your Model>)ViewBag.list).Count-3))
{
<li>
<a href="#">
<img src="#item.postImage" width="100%" alt="PostImage" style="margin-bottom: 10px;" />
<p class="flex-caption">#item.postTitle</p>
</a>
</li>
}
</ul>
</div>
I implemented a multi-language website by using resources files in Asp.net MVC.
All works fine, but my problem is in the layout. How I can use dynamic resources in my layout using view-bag?
I need to write something like this somewhere in my layout but I dont know what is the correct way to do this:
#{ var langu = ViewBag.lang;}
#Resources.langu.App_Name;
it has Error of course.
here is my layout page if needed:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="preloader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- Header
============================================ -->
<div class="header">
<div class="container relativesaz">
<div class="row">
<div class="col-sm-12">
<!-- Navbar Header -->
<div class="navbar-header">
<!-- Menu Toggle -->
<button class="menu-toggle"><i class="fa fa-navicon"></i></button>
<!-- Logo -->
<a class="iconvrf logo navbar-brand relativesaz" href="" target="_blank">
<img src="" alt="" />
<span class="fontsmall">
</span>
</a>
</div>
<!-- Menu -->
<div class="menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Feature</li>
<li>Description</li>
<li>Screenshot</li>
<li>AW </li>
<li>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
#ViewBag.ActiveMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("ru", "Home")">Russian</a></li>
<li><a class="colorblack" href="#Url.Action("cn", "Home")">Chinese</a></li>
<li><a class="colorblack" href="#Url.Action("jp", "Home")">Japanese</a></li>
<li><a class="colorblack" href="#Url.Action("nl", "Home")">Dutch</a></li>
<li><a class="colorblack" href="#Url.Action("dk", "Home")">Danish</a></li>
<li><a class="colorblack" href="#Url.Action("de", "Home")">German</a></li>
<li><a class="colorblack" href="#Url.Action("fr", "Home")">French</a></li>
<li><a class="colorblack" href="#Url.Action("en", "Home")">English </a></li>
</ul>
</li>
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("tr", "Home")">Turkish</a></li>
<li><a class="colorblack" href="#Url.Action("th", "Home")">Tahi</a></li>
<li><a class="colorblack" href="#Url.Action("sv", "Home")">Swedish</a></li>
<li><a class="colorblack" href="#Url.Action("pt", "Home")">Portuguese</a></li>
<li><a class="colorblack" href="#Url.Action("no", "Home")">Norwegian</a></li>
<li><a class="colorblack" href="#Url.Action("kr", "Home")">Korean</a></li>
<li><a class="colorblack" href="#Url.Action("es", "Home")">Spanish</a></li>
<li><a class="colorblack" href="#Url.Action("it", "Home")">Italian </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
#RenderBody()
<script src="~/Scripts/plugins.js"></script>
<script src="~/Scripts/main.js"></script>
</body>
</html>
You can directly use resx without viewbag like this:
Solution
A layout and two resx.
_Layout.cshtml
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
#if (System.Globalization.CultureInfo.CurrentCulture.ToString() == "fa-IR")
{
#Resource_fa_IR.App_Name
}
else
{
#Resource.App_Name
}
</p>
</div>
</div>
</header>
Resource.Designer.cs and Resource.fa.IR.Designer.cs
public static string App_Name {
get {
return ResourceManager.GetString("App_Name", resourceCulture);
}
}
You should change internal to public in there classes.
Below is my code snippet:
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">This is a LOGO </a>
</div>
<ul class="nav navbar-nav pull-right">
<li><a href="#" > Abous US </a></li>
<li><a href="#" > Contact US </a></li>
<li><a href="#" > Acount </a></li>
</ul>
</nav>
</div>
</div>
</div>
My question: How can I pull ABOUT US and CONTACT US items into the right and the ACOUNT is in the left?
As per the docs, you can use navbar-right to pull some elements to the right:
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
I am looking to create this common (on iPhone) list type using jQuery Mobile:
The key feature is the alphabet running down the right side that will scroll to the closest matching item.
Does something like this already exist or do I need to roll my own? I was unable to find it in the demos, although List dividers gets me part way there.
Well it's a work in progress, but I think it can be done. example:
http://jsfiddle.net/qXT9Z/32/
CSS
#list-navigation {
color:#696969;
position:absolute;
right:0px;
top:0px;
z-index:200;
}
JS
$('.scrollToSelected').bind('click', function() {
var view = $(this).attr('id');
var list = view.split('-');
var elem = $("#"+list[1]);
// not sure if this is offset or position
var position = elem.position();
var offset = elem.offset();
//alert('left: '+position.left + ", top: " + position.top);
//alert('left: '+offset.left + ", top: " + offset.top);
$.mobile.silentScroll(position.top);
//$.mobile.silentScroll(offset.top);
});
$('.showDetails').bind('click', function() {
$.mobile.changePage( "#details", { transition: "slideup"} );
});
HTML
<div data-role="page" id="list">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider" id="a">A</li>
<li class="showDetails">
Adam Kinkaid
</li>
<li class="showDetails">Alex Wickerham</li>
<li class="showDetails">Avery Johnson</li>
<li data-role="list-divider" id="b">B</li>
<li class="showDetails">Bob Cabot</li>
<li data-role="list-divider" id="c">C</li>
<li class="showDetails">Caleb Booth</li>
<li class="showDetails">Christopher Adams</li>
<li class="showDetails">Culver James</li>
<li data-role="list-divider" id="d">D</li>
<li class="showDetails">David Walsh</li>
<li class="showDetails">Drake Alfred</li>
<li data-role="list-divider" id="e">E</li>
<li class="showDetails">Elizabeth Bacon</li>
<li class="showDetails">Emery Parker</li>
<li class="showDetails">Enid Voldon</li>
<li data-role="list-divider" id="f">F</li>
<li class="showDetails">Francis Wall</li>
<li data-role="list-divider" id="g">G</li>
<li class="showDetails">Graham Smith</li>
<li class="showDetails">Greta Peete</li>
<li data-role="list-divider" id="h">H</li>
<li class="showDetails">Harvey Walls</li>
<li data-role="list-divider" id="m">M</li>
<li class="showDetails">Mike Farnsworth</li>
<li class="showDetails">Murray Vanderbuilt</li>
<li data-role="list-divider" id="n">N</li>
<li class="showDetails">Nathan Williams</li>
<li data-role="list-divider" id="p">P</li>
<li class="showDetails">Paul Baker</li>
<li class="showDetails">Pete Mason</li>
<li data-role="list-divider" id="r">R</li>
<li class="showDetails">Rod Tarker</li>
<li data-role="list-divider" id="s">S</li>
<li class="showDetails">Sawyer Wakefield</li>
</ul>
<ul data-role="none" id="list-navigation">
<li>
<p id="list-1" class="scrollToSelected"><strong>1</strong></p>
<p id="list-2" class="scrollToSelected"><strong>2</strong></p>
<p id="list-3" class="scrollToSelected"><strong>3</strong></p>
<p id="list-a" class="scrollToSelected"><strong>A</strong></p>
<p id="list-b" class="scrollToSelected"><strong>B</strong></p>
<p id="list-c" class="scrollToSelected"><strong>C</strong></p>
<p id="list-d" class="scrollToSelected"><strong>D</strong></p>
<p id="list-e" class="scrollToSelected"><strong>E</strong></p>
<p id="list-f" class="scrollToSelected"><strong>F</strong></p>
<p id="list-g" class="scrollToSelected"><strong>G</strong></p>
<p id="list-h" class="scrollToSelected"><strong>H</strong></p>
<p id="list-i" class="scrollToSelected"><strong>I</strong></p>
<p id="list-j" class="scrollToSelected"><strong>J</strong></p>
<p id="list-k" class="scrollToSelected"><strong>K</strong></p>
<p id="list-l" class="scrollToSelected"><strong>L</strong></p>
<p id="list-m" class="scrollToSelected"><strong>M</strong></p>
<p id="list-n" class="scrollToSelected"><strong>N</strong></p>
<p id="list-o" class="scrollToSelected"><strong>O</strong></p>
<p id="list-p" class="scrollToSelected"><strong>P</strong></p>
<p id="list-q" class="scrollToSelected"><strong>Q</strong></p>
<p id="list-r" class="scrollToSelected"><strong>R</strong></p>
<p id="list-s" class="scrollToSelected"><strong>S</strong></p>
<p id="list-t" class="scrollToSelected"><strong>T</strong></p>
<p id="list-u" class="scrollToSelected"><strong>U</strong></p>
<p id="list-v" class="scrollToSelected"><strong>V</strong></p>
<p id="list-w" class="scrollToSelected"><strong>W</strong></p>
<p id="list-x" class="scrollToSelected"><strong>X</strong></p>
<p id="list-y" class="scrollToSelected"><strong>Y</strong></p>
<p id="list-z" class="scrollToSelected"><strong>Z</strong></p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="details">
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Details</li>
<li>List</li>
</ul>
<br />
<p>
Here are the details you were looking for
</p>
</div>
</div>