The thing is that I want middle1 to be displayed as default, as u see from the code block.
So the problem is now I have duplicated text, I mean it works but everytime I change text in one block I have to copy it and paste it in another it is so irritating.
What I have to add or remove ?
Thx in advance.
HTML:
<div class="middle">
<div id="middle1">
<p>text1</p>
</div>
<div id="middle2">
<p>text2</p>
</div>
<div id="middle3">
<p>text2</p>
</div>
<div class="middle_display" id="question">
<p>text1</p>
</div>
</div>
css:
.middle{
background-image:url(Images/struktura/midd_midd_border.jpg);
background-repeat:repeat-y;
height:auto;
float:left;
width:682px;
margin:0 0 0 0;
}
#middle1, #middle2, #middle3 {display: none;}
Jquery:
<script type="text/javascript">
$(document).ready(function() {
$('.question1').click(function(){
$('.middle_display').html($('#middle1').html());
})
$('.question2').click(function(){
$('.middle_display').html($('#middle2').html());
})
$('.question3').click(function(){
$('.middle_display').html($('#middle3').html());
})
});//end of ready
</script>
You want middle1's contents to be displayed as default? Insert this line:
$('.middle_display').html($('#middle1').html());
right below "$(document).ready..."
Related
I have a html code which has two div parents inside it with class "main" and "chat". There is another div in first parent with class="menu"
When user clicks on menu, it will add "open" class to the div. Now i want to hide "chat" when menu is open.
And i know this if i want to select a class, it must be inside of that div. Is there any solution (with css or js) to select another div which is outside of that class?
And i don't have access to html code of "chat" section because it's loading from a third-party website.
Here is my HTML code:
<body>
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
</div>
</body>
and this is what i want to do (but i know that doesn't work in this way):
.menu.open .chat {display:none;}
Thanks.
$(".menu").on("click", function() {
$(".menu").addClass("open");
$(".chat").hide();
});
.open {
background: pink
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
Chat Div
</div>
</body>
Try this code sample:
JS:
function Open(){
document.getElementsByClassName("menu")[0].classList.add("open");
document.getElementsByClassName("chat")[0].style.display = "none";
}
HTML:
<body>
<div class="main">
<div class="menu" onclick="Open()">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat"></div>
</body>
You can use toggle() and toggleClass() in click event
$(".menu").on("click", function() {
$(".menu").toggleClass("open");
$(".chat").toggle()
});
.open{
color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
Chat Div
</div>
</body>
You can achieve this if you add a class to main as well (or only main, and not menu). Suppose you decide to add class menu-opened to main. Now you should be able to achieve desired results using the css code:
.main.menu-opened~.chat {display:none;}
The ~ is used to select every .chat element proceeded by .main.menu-opened element.
Here is the solution:
Vanilla JS: (https://codepen.io/cssjs/pen/EMMPjV)
var btnMenu = document.querySelector('.menu')
var boxChat = document.querySelector('.chat')
btnMenu.onclick = handleMenu
function handleMenu(e) {
e.preventDefault()
e.stopPropagation()
if (!btnMenu.classList.contains('open')) {
btnMenu.classList.add('open')
boxChat.classList.add('open')
} else {
btnMenu.classList.remove('open')
boxChat.classList.remove('open')
}
}
jQuery: (https://codepen.io/cssjs/pen/eXXZEG)
var btnMenu = $('.menu')
var boxChat = $('.chat')
$(btnMenu).on('click', function() {
$(btnMenu).toggleClass('open')
$(boxChat).toggleClass('open')
})
HTML:
<body>
<div class='main'>
<a href="#menu" title="Menu" class='menu'>Menu</a>
</div>
<div class='chat'>
<div>Some chat content.</div>
</div>
</body>
CSS:
.chat {
display: none
}
.menu.open {
color: red;
font-weight: bold;
}
.chat.open {
display: block
}
Hope it helps. :)
Here is the Working code as you want..But I have added "open" class on main in-spite of menu.
jQuery(document).ready(function($) {
$('.menu').on('click', function(){
$('.main').toggleClass('open');
})
});
.main.open + .chat{
display: none;
}
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
chat data
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
In my project, I use easyui-layout.
Sometimes, I should load other content from other page with ajax. And these new content will be laied in center region of cenDiv.
The ajax code is:
$.ajax({
.....
success:function(data)
{
$("#cenDiv").html(data);
.......
}
});
Now, I encounter a problem. When the content is too much which overflow cenDiv, there is no scroll. So only part of content display in cenDiv.
Here is my html code:
<body style="height:100%" class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;height:88%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:100%;padding:10px" data-options="region:'west',split:true,title='Function'"></div>
<div id="cenDiv" class="easyui-layout" style="position:static;height:100%;width:100%" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>
I have set fit="true" in body, firDiv and cenDiv, but it works fail. Because the height of body, firDiv and cenDiv are changed.
And I tried overflow:auto, but it works fail again.
Just only cenDiv display scroll when content data is too much, while the others div postion is not changed.
Who can help me?
You need to use both max-height and overflow-y on cenDiv:
max-height: 100px;
overflow-y: auto;
Without the max-height, the scroll won't appear.
Anyway, you used too much height:100%, both the div inside "firDiv" have it.
You could change them in such way:
<body class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:calc(100vh - 293px);padding:10px" data-options="region:'west',split:true,title='Function'"></div>
<div id="cenDiv" class="easyui-layout" style="position:static;width:100%;height:150px;max-height:150px;overflow:auto;" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>
Delete position:static, and added
overflow-y:auto
works OK, like:
<div id="cenDiv" class="easyui-layout" style="height:100%;width:100%;overflow-y:auto" data-options="region:'center',title:''">
I want to change the class of my closest div after pressing a button. Let me make it more clear by showing some code. I have the following HTML:
<div class="wrapper">
<div class="title">
<div class="aa">-</div>
<div class="ab">-</div>
<div class="ac">-</div>
<div class="navigation">
Test link
</div>
</div>
<div class="content not_active">
<p>
Text
</p>
</div>
</div>
With the following CSS:
.active{
display:block;
}
.not_active{
display:none;
}
Now my goal is to find the closest div that has the class: .not_active and change that class after pressing on the hyperlink with class: navigation.
I tried it with jQuery with the following code:
$(function () {
$('.navigatie a').click(function () {
$(this).parent().parent().find('.not_active').toggleClass('active');
});
});
but with no succes. What I am doing wrong?
JSFIDDLE DEMO
It is because you are using .navigatie class instead of .navigation.
Here the JSFiddle.
This question already has answers here:
ReferenceError: Can't find variable: $
(4 answers)
Closed 6 years ago.
I have a span which acts like a button to display divs depending on what span you click. Each span has its on div containing its content which is displayed none when onload. The problem is that the span when click doesn't do anything. It should be displaying its content.
HTML
<p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div><p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div>
CSS
.productbtn:hover, productbtn:active {
background: #bdc3c7;
color: #fff;
}
.productbtn {
padding: 20px;
background: #ecf0f1;
margin: 10px;
width: 250px;
display: inline-block;
cursor: pointer;
transition: .3s ease all;
}
SCRIPT
$(function(){
$(".btn1").click(function(){
$(".section-1").css("display","block");
$(".section-2, .section-3, .section-4").css("display","none");
});
$(".btn2").click(function(){
$(".section-2").css("display","block");
$(".section-1, .section-3, .section-4").css("display","none");
});
$(".btn3").click(function(){
$(".section-3").css("display","block");
$(".section-2, .section-1, .section-4").css("display","none");
});
$(".btn4").click(function(){
$(".section-4").css("display","block");
$(".section-2, .section-3, .section-1").css("display","none");
});
});
FIDDLE HERE
other Javascript or jquery solutions are acceptable.
FIDDLE HERE
For active status resolve the previous issues above.
SCRIPT ACTIVE STATUS:
$(function(){
$(".btn-click").click(function(){
var active = $(this).addClass("active")
var target = $(this).data("action");
$("."+target).show().siblings("div[class*=section-]").hide();
})
});
Your code wasn't working because you didn't include jQuery. Try adding that in fiddle it will work.
But why to write that long code when you can do it smartly with a much shorter code:
Here is the jQuery:
$(function(){
$(".btn-click").click(function(){
var target = $(this).data("action");
$("."+target).show().siblings("div[class*=section-]").hide();
})
});
Yea that's it, but, if the HTML is like:
<p class="lead"><span class="productbtn btn1 btn-click" data-action="section-1">FRESH</span><span class="productbtn btn2 btn-click" data-action="section-2">CHILLED</span><span class="productbtn btn3 btn-click" data-action="section-3">FROZEN</span><span class="productbtn btn4 btn-click" data-action="section-4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div>
Doesn't look like you included jQuery
I added it in the external resources section on the left hand, and now it works https://jsfiddle.net/aLkd4545/1/
Here's how to include it in your code(html):
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.