function showwLess() {
button.style.display="block";
idTab5.style="height:250px;overflow:hidden;font-size:14px;line-height:20px;";
button2.style.display="none";
}
That is the code for my button, idTab5 is the div to be styled, I was wondering if there was a better way to apply the style to the div than
idTab5.style="
EDIT:
got this..
<script>
var button2 = document.getElementById("button2");
var button = document.getElementById("button");
var idTab5 = document.getElementById("idTab5");
function showwMore() {
$("#button").hide();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").show();
}
function showwLess() {
$("#button").show();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").hide();
}
</script>
and
{if $product->description|count_characters:true > 350 }
{* full description *}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;">{$product->description}</div>
<input id="button" type="button" style="margin-top:5px;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar +" onclick="showwMore()">
<input id="button2" type="button" style="margin-top:5px;display:none;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar -" onclick="showwLess()">
{else}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;line-height:16px;">{$product->description}</div>
{/if}
There is, use jquery like this:
$("#idTab").css({
height: 250,
overflow: "hidden",
//and so on...
});
Use jquery. If your elements have id's:
function showwLess() {
$("#button").show();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").hide();
}
It's really very easy to get used to it, if you want a starting point I highly recommend CodeSchool.
EDIT
Add this to your html to include the jquery library. I still recommend you check my links:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Related
Here is simple code to change the display of a div on the button action using switch case.
Please have a look at it i am not getting where i went wrong.
Link: https://jsfiddle.net/r6nkuwvc/
javascipt code:
$(document).on('click', ".change", function() {
var $input = $(this);
$(".same").each(function() {
if ($(this).css("display") == "block") {
$(this).css("display", "none");
}
});
switch ($input.attr("id")) {
case "b1":
$("#abc").css("display", "block");
break;
case "b2":
$("#xyz").css("display", "block");
break;
}
});
As has been pointed out in the comments, your code works as is. You just forgot to add the jQuery library, and the selectors #hello and #bye didn't exist. Next to that, you are also over-complicating your code. In jQuery you do not have to check if an element is visible before hiding it, you can just hide it. And when using a class selector you do not have to run .each against it for jQuery's own internal functions such as hide(); jQuery will hide all elements with this class.
https://jsfiddle.net/r6nkuwvc/5/
$(document).on('click', ".change", function() {
$(".same").hide();
switch ($(this).attr("id")) {
case "b1":
$("#abc").show();
break;
case "b2":
$("#xyz").show();
break;
}
});
You can make it even much simpler using an object. Store the reference to the
selector in an object this way you can avoid the switch case. Although use show() and hide() methods to show and hide the elements.
// object which holds the reference
var sel = {
b1: "#abc",
b2: "#xyz"
};
$(document).on('click', ".change", function() {
// hide all elements initially there is no need to iterate over them
$(".same").hide();
// get selector from object using id and show the element
$(sel[this.id]).show();
})
$(document).on('click', ".change", function() {
var sel = {
b1: "#abc",
b2: "#xyz"
};
$(".same").hide();
$(sel[this.id]).show();
})
.same {
display: none;
width: 400px;
height: 200px;
border: 1px solid;
}
#abc {
display: block;
}
#xyz {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="abc" class="same">
Hello
</div>
<div id="xyz" class="same">
Bye
</div>
<button id="b1" class="change">b1</button>
<br>
<button id="b2" class="change">b2</button>
</body>
You have not put up proper id's. Also I think you forget to set JQuery link in your code, that is why it is giving reference error.
Here is the updated code:
$(document).on('click', ".change", function(){
var $input = $(this);
$(".same").each(function(){
if($(this).css("display")=="block"){
$(this).css("display","none");
}
})
switch($input.attr("id")){
case "b1" : $("#abc").css("display", "block");
break;
case "b2" : $("#xyz").css("display","block");
break;
}
})
.same{
display: none;
width: 400px;
height: 200px;
border: 1px solid;
}
#abc{
display: block;
}
#xyz{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="abc" class="same">
Hello
</div>
<div id="xyz" class="same">
Bye
</div>
<button id="b1" class="change">b1</button><br>
<button id="b2" class="change">b2</button>
</body>
Here is the jsfiddle https://jsfiddle.net/r6nkuwvc/6/
In case you want to control what to show/hide from html, than I suggest this approach:
$('body').on('click', '[data-hide]', function(e) {
$($(this).data('hide')).hide();
});
$('body').on('click', '[data-show]', function(e) {
$($(this).data('show')).show();
});
.same {
display: none;
width: 100%;
height: 100px;
border: 1px solid black;
}
#abc {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc" class="same">
Hello
</div>
<div id="xyz" class="same">
Bye
</div>
<p>
<button data-hide=".same" data-show="#abc">Show Hallo</button>
</p>
<p>
<button data-hide=".same" data-show="#xyz">Show Bye</button>
</p>
So below I have some code of what I'm working with. Right now, if you just launch the website, the #picture div has a background image, and if you press any of the buttons, that picture is replaced with something else.
So what I can't figure out is how the buttons would change what they do after pressing a button. Let's say you click on Button 1 and the background image is replaced. I want the buttons to recognize what background image is in that div and change functions accordingly, in my case, I want them to change what pictures they replace the current one with.
If the current background of #picture is X, you have ABC choices, if the background of #picture is Y, you have DEF choices, would be a TLDR explanation maybe.
<div id="adventure">
<div class="picture">
</div>
<div id="choice">
<button class="button1">Val 1</button>
<button class="button2">Val 2</button>
<button class="button3">Val 3</button>
</div>
</div>
$('.button1').click(function() {
$('.picture').css('background-image',
'url("image1")'
);
});
$('.button2').click(function() {
$('.picture').css('background-image',
'url("image2")'
);
});
$('.button3').click(function() {
$('.picture').css('background-image',
'url("image3")'
);
});
I've probably gone about doing this in a bad way but I'm really at a loss on how I would do this. I can only think up of one way of doing it and that is to have a bunch of if statements depending on what background is in the #picture div but I don't know how to implement that.
This demo relies on the class .active which determines which set of buttons (called .group) are visible, whilst the other .groups remain absent. The #switch button will toggle through each group.
You must name your images according to the id of the button it belongs to.
Example:
HTML of Button
<button id="image_of_sky.png">D</button>
URL to Image
http://domain.com/path/to/image_of_sky.png
jQuery img variable
var img = "http://domain.com/path/to/"+btn;
Snippet
$('.button').click(function() {
var btn = $(this).attr('id');
var img = "https://placehold.it/330x150?text=" + btn;
$('.picture').css('background-image',
'url(' + img + ')'
);
});
$('#switch').click(function() {
var act = $('.group.active');
var next = act.next();
act.removeClass('active');
next.addClass('active');
if (act.attr('id') == "choiceGHI") {
$('#choiceABC').addClass('active');
}
});
#adventure {
width: 395px;
}
.picture {
width: 330px;
height: 150px;
border: 1px outset grey;
}
.group {
width: 330px;
display: none;
padding: 0;
}
.button {
width: 32.5%;
margin: 0;
}
.active {
display: block;
}
#switch {
float: right;
margin: -20px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adventure">
<div class="picture"></div>
<div id="choiceABC" class="group active">
<button id="Image1" class="button">A</button>
<button id="Image2" class="button">B</button>
<button id="Image3" class="button">C</button>
</div>
<div id="choiceDEF" class="group">
<button id="Image4" class="button">D</button>
<button id="Image5" class="button">E</button>
<button id="Image6" class="button">F</button>
</div>
<div id="choiceGHI" class="group">
<button id="Image7" class="button">G</button>
<button id="Image8" class="button">H</button>
<button id="Image9" class="button">I</button>
</div>
<button id="switch">Switch</button>
</div>
Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db.
My code:
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>
Any help would be appreciated Thanks!!
I would probably just use contentEditable, if possible.
document.addEventListener('DOMContentLoaded', function(){
var btn = document.getElementById("editButton");
btn.addEventListener("click", function(){
var editLabel = document.getElementById("editLabel");
editLabel.contentEditable = true;
editLabel.className = "editActive";
});
});
#editLabel{
margin-bottom: 25px;
display: inline-block;
padding: 5px;
box-sizing: border-box;
}
#editButton{
display: block;
}
.editActive{
border: 1px inset #e3e3e3;
cursor: text;
}
<label id="editLabel">Hello World</label>
<button id="editButton">Edit Label</button>
I wouldn't recommend doing it inline. As you can see the result will not be clean. This will work though.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;" value="myInput">
<button onclick="$('label').text($('input').val())">edit</button>
I have a lots of pages structured like this:
<body>
<table><tr><td align="center" width="100%">
--PAGE HTML--
</td></tr></table>
</body>
And I have to change those the page to the following structure for a short period of time:
<body>
<div style="width: 100%; min-height: 960px; text-align: center;">
--PAGE HTML--
</div>
</body>
So I decided to use jQuery.
Here is my code.
$(document).ready(function(){
var PageHtml = $("td:first").html();
$("table:first").remove();
console.log(PageHtml);
$("body").html('<div style="width: 100%; min-height: 960px; text-align: center;">'+PageHtml+'</div>');
});
The problem is that instead of having the expected result I have
<body>
<div style="width: 100%; min-height: 960px; text-align: center;"></div>
</body>
(I don't have the page html in the div element)
Now for diagnostic purposes I added the line console.log(PageHtml); And it does return the correct HTML string.
I'm out of ideas to make this work, any suggestions?
Thanks for any help.
Try the following:
var $div = $("<div />").css({
'width': '100%',
'min-height': '960px',
'text-align': 'center',
'color': 'red'
});
$div.appendTo('body');
$div.html($("td:first").html());
$("td:first").remove();
I Have a custom designed grid:
http://jsfiddle.net/97n4K/
when you click a grid item the content div of that item slides open and when you click it again it closes. This works fine.
My problem is i only ever want one content area to open at a time much like a standard accordion.
So for instance i click 'content one' - it opens 'content area one' - now if i click 'content two' i want 'content area one' to close (slideUp) and 'content area two' to open (slideDown) at the same time - just like an accordion does.
Obviously my html is alot different from a standard accordion setup so im stuggling to figure it out how to do it with my limited Jquery knowledge.
Please see my Js Fiddle above - and heres the code if you prefer below:
Thanks
HTML
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1"><h3>Content<br>one</h3></div>
<div class="expBtn exOlive ex2"><h3>Content<br>two</h3></div>
<div class="expBtn exOrange ex3"><h3>Content<br>three</h3></div>
</div>
<div class="expArea expArea1">
This is content one
</div>
<div class="expArea expArea2">
This is content two
</div>
<div class="expArea expArea3">
This is content three
</div>
CSS
.expBtn {
width: 190px;
height: 68px;
text-decoration: none;
background-color: #000;
float: left;
cursor: pointer;
}
.expBtn h3 {
font-size: 18px;
font-weight: bold;
color: #e8e7e4;
text-transform: none;
line-height: 1.2em;
letter-spacing: 0em;
padding-top: 13px;
padding-left: 13px;
padding-right: 13px;
padding-bottom: 0;
font-family: arial;
margin: 0;
}
.expArea {
display: none;
width: 570px;
background-color: #ccc;
height: 200px;
}
JS
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
Ok so i have created essentially what i want but i have a massive load of duplicate JS that i know could be simplified by any one with better knowledge of jquery / javascript than me. Please check out this new JS fiddle - any solution to get the JS down would be greatly appreiated!
Thanks
NEW JS FIDDLE
http://jsfiddle.net/97n4K/9/
If you wish to keep your same html structure you can use the following to get what you want;
JS FIDDLE DEMO
Switch your JS click handling to this;
$('.expBtn').on('click', function () {
var area = $(this).index() + 1;
var new_div = $('.expArea' + area);
// do nothing if it's already visible
if (!new_div.is(':visible'))
{
// slide up all first
$('.expArea').slideUp(300);
new_div.slideDown(1000);
}
});
You can easily add more html sections providing you follow the same numbering you've already done.
You can use slideUp or slideDown? Im not 100% sure as to what exactly you want to achieve but this fiddle should help you.
$(".ex1").click(function () {
$(".expArea1").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex2").click(function () {
$(".expArea2").slideToggle(1000);
$(".expArea1").slideUp(1000);
$(".expArea3").slideUp(1000);
});
$(".ex3").click(function () {
$(".expArea3").slideToggle(1000);
$(".expArea2").slideUp(1000);
$(".expArea1").slideUp(1000);
});
http://jsfiddle.net/97n4K/5/
Basically you can use a plugin for this and it will help better
I have added some simple code so your code can work
<div style="width: 100%; height: 68px;">
<div class="expBtn exBlue ex1" data-accord = "expArea1"><h3>Broadcast + Arts + Media</h3></div>
<div class="expBtn exOlive ex2" data-accord = "expArea2"><h3>Business<br>Services</h3></div>
<div class="expBtn exOrange ex3" data-accord = "expArea3"><h3>Charity +<br>NFP</h3></div>
</div>
<div class="expArea expArea1">
expArea1 content
</div>
<div class="expArea expArea2">
expArea2 content
</div>
<div class="expArea expArea3">
expArea3 content
</div>
Please look at data-accord and it's content
Now for the JS
$('.expBtn').click(function(){
var current = $(this).data('accord');
$('.expArea').each(function(){
if($(this).not('.'+current).css('display') == "block")
{
$(this).slideToggle();
}
});
$('.'+current).slideToggle(1000);
});
$(".exBlue").hover(function () {
$(this).css("background-color","#0092d2");
}, function() {
$(this).css("background-color","#000");
});
$(".exOlive").hover(function () {
$(this).css("background-color","#9bad2a");
}, function() {
$(this).css("background-color","#000");
});
$(".exOrange").hover(function () {
$(this).css("background-color","#ff8a0c");
}, function() {
$(this).css("background-color","#000");
});
You can see it working
http://jsfiddle.net/97n4K/6/
I hope this can help