I am new one for ASP.NET.
I want to list out my views in TabView.
I do the Following Changes in my application,
In _Layout.cshtml i add the following bundle in
<head>
#Styles.Render("~/Content/themes/base/css")
</head>
and
<Body>
#Scripts.Render("~/bundles/jqueryui")
<Body>
After that i add two controller like Default1 and Default2, in both controller i add one view like, index.
Then i write the following code in Index.cshtml in Home view to display my controller view in particular tab like.
<div id="body">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
#section scripts
{
<script>
$(function () {
$("#tabs").tabs();
});
</script>
}
</div>
</div>
But it's not working. I don't Know i add more code for work that.
Please help me. Thanks in advancce.
You have to add content also to display on tab click .so add two div in your code .as shown below.
Modified code ::
<div id="body">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
#section scripts
{
<script>
$(function () {
$("#tabs").tabs();
});
</script>
}
</div>
<div id="tab-1">
'content which you want to display on click of first tab'
</div>
<div id="tab-2">
'content which you want to display on click of second tab'
</div>
</div>
Don't know if it will fix all your issues but this:
$(function () {
$(function () {
$("#tabs").tabs();
});
});
should be:
$(function () {
$("#tabs").tabs();
});
You don't need 2 $(function() {}) handlers
Related
I'm trying to use a javascript library in one of my .Net Core 3.1 Razor pages.
So I added these to my _Layout.cshtml page:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/gameRec/gr.min.js" type="text/javascript"></script>
Then in my Index.cshtml, I am trying to use gr like this:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<head runat="server">
<script>
gr.init({
selector: 'textarea#record',
height: 500,
width: 25,
view_style: 'body { font-size:14px }'
});
</script>
</head>
<div class="text-center">
<h1 class="display-4">GAME PORTAL</h1>
<p>GAME</p>
<div id="gameContainer">
<textarea id="record" asp-for="game" cols="25" rows="3"></textarea>
</div>
</div>
But it keeps telling me this:
(index):34 Uncaught ReferenceError: gr is not defined
Now I checked, and I know the library is in the correct place.
So Im not sure why my Index page can't find it.
Is there anything else I need to do?
Thanks!
Tag <head should be in Layout
All you script files should be in layout at the bottom of the body
<body>
......
<script src="~/js/gameRec/gr.min.js" type="text/javascript"></script>
</body>
immediately after this add
#RenderSection("scripts", required: false)
and move your custom script in the botom of index file
#section Scripts {
<script>
...... your custom script
</script>
}
Dropdown is not showing when clicked. Other input fields are working as expected except this.
The dropdown field is one of the field in form tag.
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
I've initialized it in the script tag just before the end of body tag. Also tried to put in head tag, or added document.ready as well as window.onload but all doesn't fix the problem.
<script>
$('.ui.dropdown').dropdown();
</script>
FYI, I've installed Semantic-UI ASP.NET MVC in Nuget.
I've tried the solutions below but to no avail.
Semantic-ui dropdown is not working
Semantic UI Dropdown is not showing the drop down but everything else is working
I managed to get the drop down list shown now, by adding this script in the head tag.
<script>
$(document).ready(function () {
$('#divDropdown').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$('#divDropdown').removeClass('active visible');
$('#dropdownMenu').removeClass('visible');
} else {
$('#divDropdown').addClass('active visible');
$('#dropdownMenu').addClass('visible');
}
$(this).data("clicks", !clicks);
});
});
</script>
By right, it can be as simple that initializing it with .dropdown should work. But somehow it's not.
I'm still waiting for someone to propose a better solution than this.
Thanks.
Include semantic CSS inside the head tag
Include jquery in the end of your body tag, then include semantic UI JS
Put your code from semantic dropdown inside
$(document).ready(function () { //code goes here });
this way it will be executed after everything loads (jquery and semantic) and it will work.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Test semantic</title>
<link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css">
</head>
<body>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="semantic2/semantic.min.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
I have the following Jquery in my user control which is loaded onto the page, however the jquery is not firing at all:
<script type="text/javascript" >
$(document).ready(function () {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 2,
first: false,
previous: "span.arrowPrev",
next: "span.arrowNext",
last: false
});
});
</script>
I have tried stripping this out and just using an alert when inside of document.ready but this still does not fire. How can i get this code to execute inside of a user control in aspx?
And simply this is the html i am using:
<div class="eng-container">
<!-- navigation holder -->
<div class="holder">
</div>
<!-- wrapped custom buttons for easier styling -->
<div class="customBtns">
<span class="arrowPrev"></span>
<span class="arrowNext"></span>
</div>
<ul id="itemContainer">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
There are no obvious errors with the code i can see.
EDIT
http://jsfiddle.net/p4LES/1/
EDIT 2
Heres the pastebin link for the code, it is quite long though for the whole page. At line 185 my script begins and my HTML code related to it.
http://pastebin.com/szknh76v
UPDATE
I've tried moving the jQuery code in question to the main.Master file for my project which looks to have fixed the problem in question and it is now firing. Although I have no clue as to why the javascript would not fire within the control.
I created a new HTML page and this worked for me:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jPages.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 2,
first: false,
previous: "span.arrowPrev",
next: "span.arrowNext",
last: false
});
alert("myMsg");
});
</script>
<head>
<title></title>
</head>
<body>
<div class="eng-container">
<!-- navigation holder -->
<div class="holder">
</div>
<!-- wrapped custom buttons for easier styling -->
<div class="customBtns">
<span class="arrowPrev"></span>
<span class="arrowNext"></span>
</div>
<ul id="itemContainer">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</body>
</html>
I am creating a site with C# .net MVC 3 i want to link a menu option which on click should go to specified div...The id of div is "portfolio" which is in index.cshtml and the menu option which has to be linked is in layout.cshtml...
gone through various documentations but didn't found solution...i have tried the native html method but is not working.
<li class="page-scroll">
Inspiration
</li>
just simple dude use this :-
"toggle visibility to use it for different tabs"
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
use this in navigation field:-
portfolio
use this as portfolio div:-
<div id="portfolio" class="section">
//body
</div>
You could use something like this:
$('a').on('click', function () {
$('html, body').animate({
scrollTop: $('#portfolio').offset().top
}, 2000);
});
That will give you a nice scroll effect.
_Layout.cshtml
<ul>
<li class="page-scroll">
Inspiration
</li>
</ul>
Index.cshtml
<div style="height:150px;background-color:Yellow">
//Content for this block goes here
</div>
<div id="portfolio" style="height:50px;">
//Here you want to move
</div>
<div style="height:150px;background-color:Gray">
//Content for this block goes here
</div>
It works on every view if the div block with that id included in each view.
Can anyone tell me how to use jQuery tooltip on jQuery accordion control?
<%# 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">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Accord').accordion(
{
create: function (event, ui) {
$('.ui-accordion-header').attr("disabled", true);
}
});
})
$(document).tooltip();
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="row" id="Accord">
<h2>Getting started</h2>
<div class="col-md-4">
<p>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<h2>Get more libraries</h2>
<div class="col-md-4">
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<h2>Web Hosting</h2>
<div class="col-md-4">
<p>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</form>
</body>
</html>
Above is my sample code. Please guide me how can I integrate tooltip with accordion? I want to get certain contents of panel on hovering mouse over the headers of accordion.
no need to use any plugin. just write it by yourself.
you can put your content which you want to show up on hover in a custom attribute ( or for example rel attribute ) and get it's value and show it in an absolute positioned span generated by jquery.
for example :
HTML:
<h2 rel="YOUR CONTENT GOES HERE">Web Hosting</h2>
jquery:
$(function(){
var ttContent = $('h2').attr('rel');
$('h2').hover(function(){
$(this).append('<span class="ttbox">' + ttContent + '</span>');
},function(){
$(this).children('.ttbox').remove();
});
});
CSS:
h2 { position:relative; }
.ttbox { position:absolute; display:none; top:20px; width:200px; height:30px; display:block; background:#000; color:#fff; }
FIDDLE DEMO