I recently incorporated the jQuery Text Editor plugin (here), in my development of an MVC project.
It was straightforward to add the plugin. However when executing my View the text editor renders as follow:
This is the code I'm using in my View:
JS references (omit the greater than and less than characters due to it's not rendered in the question):
<script src="~/Scripts/jquery-1.11.1.min.js">
<script src="~/Plugins/jQuery-TE/jquery-te-1.4.0.min.js">
<link href="~/Plugins/jQuery-TE/jquery-te-1.4.0.css" rel="stylesheet">
HTML:
<div class="row">
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
Executive Summary
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<textarea name="textarea" class="jqte-test" placeholder="Enter some text">
</textarea>
</div>
</form>
</div>
</div>
</div>
</div>
Script for the JQTE:
$('.jqte-test').jqte();
// settings of status
var jqteStatus = true;
$(".status").click(function () {
jqteStatus = jqteStatus ? false : true;
$('.jqte-test').jqte({ "status": jqteStatus })
});
I change the CSS rule
.jqte_tool.jqte_tool_1 .jqte_tool_label {
position:relative;
display:block;
padding:3px;
width:70px;
height:16px; /* change it to 20px; */
overflow:hidden; }
That's how it worked for me.
Maybe for someone else:
.jqte_tool.jqte_tool_1 .jqte_tool_label {
position:relative;
display:block;
padding:3px;
width:70px;
height:21px; /*change*/
overflow:hidden;
}
.jqte_tool_label{
padding-top: 1px !important; /*add*/
height: 25px !important; /*add*/
}
works for me!
.tab_point_decr, .tab_point_decr img, .tab_point_decr div {
overflow: visible !important; /*change*/
}
.jqte_toolbar {
overflow: auto !important;
padding: 3px 4px;
background: #EEE;
border-bottom: #BBB 1px solid;
position: inherit;
overflow: visible !important; /*add*/
height: 35px; /*add*/
}
.jqte_fontsizes {
height:auto; /*change*/
}
.jqte_cpalette {
z-index:20; /*add*/
}
Related
So let's say I have something like this:
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.td1,
.td2,
.td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width: 100%;
}
.td2,
.td3 {
border-top: none;
color: red;
}
<body>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3">This is the text below the other div</div>
</div>
</div>
Now, what I would like to do is have the td2 text to show when you first see the page, but not the td3. Then when clicking the td2 div it makes a fadeout or slides upwards, and then reveal the td3 div and that text. In this particular case the div doesn't have to come back when re-clicking. It's just like a "one way ticket". Click, and it's gone forever.
What might be the easiest way to do this ?
You could use JQuery UI to get the fade effect, and register to click event on .td2 in order to update the DOM as per your requirement. Here's one way of doing it:
$(".td2").on("click", function(){
$(".td2").fadeOut();
$(".td3").fadeIn();
});
body {
background: #ffffff;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width:100%
}
.td1, .td2, .td3 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #eeeeee;
font-size: 18px;
color: #000000;
width:100%;
}
.td2, .td3 {
border-top: none;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery-ui.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">Here is some random text</div>
</div>
<div class="row">
<div class="td2">This is the text you see at first</div>
</div>
<div class="row">
<div class="td3" style="display:none">This is the text below the other div</div>
</div>
</div>
$('.td2').on('click', function() {
$(this).fadeOut(200).promise()
.done(function() {
$('.td3').fadeIn(200);
});
});
.table {
display: table;
margin: 0px auto;
max-width: 400px
}
.row {
display: table-row;
width: 100%
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="row">
<div class="td1">
Here is some random text
</div>
</div>
<div class="row">
<div class="td2">
This is the text you see at first
</div>
</div>
<div class="row">
<div class="td3 hide">
This is the text below the other div
</div>
</div>
</div>
You will need to learn some javascript and some jQuery for this ;)
Add this to your css:
.td3{
display: none;
}
And write this javascript:
$('.td2').on( "click", function(){
$('.td2').fadeOut();
$('.td3').fadeIn();
});
I have a single page site with lots of contents and a sticky sidebar navigation on the left. I am trying to get the page to scroll down to the corresponding section in the contents div whenever a menu item is selected. This is probably really basic stuff but I just can’t wrap my head around it (been trying out various solutions, without success – see code below).
I am relatively new to javascript and jquery and would be very grateful for ideas/ suggestions.
What I managed to do so far:
The sidebar menu is sticky.
The active state of the links in the sidebar nav changes when a menu item is selected.
I also managed to get the elements in the contents div to change active state whenever the corresponding nav menu item is selected.
All that is missing now is for the menu links to work and actually push down the page to the right section ids.
Again, sorry if this is a really dumb question, I am grateful for any suggestions.
$(function() {
$('.feature_tab').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.features_public_content_container');
var allTabs = featureGroup.find('.feature_tab');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
});
//show what we need
$('.feature_box.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1000);
return false;
});
});
});
.hidden {
display:block;
color: blue;
}
.features_page {
margin-top:65px;
position: relative;
}
.features_public_content_container {
width:100%;
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:0 40px
}
#left_sidebar {
height: 100% !important;
width: 20%;
border: 4px solid green !important;
position: absolute;
float: left
}
#right {
border: 4px solid pink !important;
height: auto;
max-width:80%;
top: 0;
right: 0;
float: right;
position: relative;
}
.features_page .sidebar_nav_container {
margin:45px auto;
background: yellow;
position: relative;
float: left
}
.features_page .sidebar_nav_container .feature_tab {
float:none;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
font-size:12px;
border-left:1px solid #efefef !important;
text-transform:uppercase;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.features_page .sidebar_nav_container .feature_tab .indicator {
position:absolute;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.features_page .sidebar_nav_container .feature_tab:hover .indicator {
display:block;
border-left:4px solid #d6ecfd
}
.features_page .sidebar_nav_container .feature_tab.selected .indicator {
display:block;
border-left:4px solid #1193f6;
}
.features_page .feature_boxes_container {
padding-bottom:80px;
padding-top:45px;
text-align: center;
background: #f2f2f2;
}
.features_page .feature_boxes_container .feature_box {
background:#fff;
display:inline-block;
height:210px;
width:235px;
margin:12px;
padding: 24px;
text-align:center;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.features_page .feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}
.features_page .feature_boxes_container .feature_box .feature_overview_icon {
padding: 18px
}
.features_page .feature_boxes_container .feature_box.active .feature_overview_icon {
color: #1193f6;
}
.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
color: #363636;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body id='public_layout' class='with_header'>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container">
<div class="col span_2" id="left_sidebar">
<div class="sidebar_nav_container">
<div class="feature_tab indicator feature_category_A selected" rel="A">Features A</div>
<div class="feature_tab indicator feature_category_B" rel="B">Features B</div>
<div class="feature_tab indicator feature_category_C" rel="C">Features C</div>
<div class="feature_tab indicator feature_category_D" rel="D">Features D</div>
<div class="feature_tab indicator feature_category_E" rel="E">Features E</div>
</div>
</div> <!-- / sidebar navigation -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<div id="A"> <!-- START A Features -->
<div class="feature_box feature_category_A active">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
</div>
<div id="B"> <!-- START B Features -->
<div class="feature_box feature_category_B in-active">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
</div>
<div id="C"> <!-- START C Features -->
<div class="feature_box feature_category_C in-active">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- /.col .span_10 -->
</div> <!-- /.public_content_container -->
</div> <!-- /.features_page -->
</div> <!-- /.layout_wrapper -->
</body>
</html>
Probably you want this:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
JSFiddle
Please also see these questions:
Simple jQuery scroll to anchor up or down the page...?
Smooth scrolling when clicking an anchor link
And also you can use plugin to do this. like FullPage
Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.
I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>
I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.
i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE
Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo
You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}