How to set multiple CSS display property values with jquery
Ok, this is driving me a bit batty. I am using the jQuery .css() method to try to set the multiple flexbox display properties needed for a class. Problem is, it only keeps the last one. Any idea on how to do this with jQuery, or is it not possible?
Here's what I've tried so far:
$(".department-name").css({
'display' : '-webkit-box',
'display' : '-webkit-flex',
'display' : '-moz-box',
'display' : '-ms-flexbox',
'display' : 'flex'
});
That doesn't work, it just gets the last one and not the others. I am manipulating a text element on a page based on how many line wraps it has (its height) and want to hide it with display:none (initial CSS value), manipulate it, then display it with the flex properties it had before I started changing the JS code to deal with the multiple line problem. Ideas?
javascript jquery html css
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
add a comment |
Ok, this is driving me a bit batty. I am using the jQuery .css() method to try to set the multiple flexbox display properties needed for a class. Problem is, it only keeps the last one. Any idea on how to do this with jQuery, or is it not possible?
Here's what I've tried so far:
$(".department-name").css({
'display' : '-webkit-box',
'display' : '-webkit-flex',
'display' : '-moz-box',
'display' : '-ms-flexbox',
'display' : 'flex'
});
That doesn't work, it just gets the last one and not the others. I am manipulating a text element on a page based on how many line wraps it has (its height) and want to hide it with display:none (initial CSS value), manipulate it, then display it with the flex properties it had before I started changing the JS code to deal with the multiple line problem. Ideas?
javascript jquery html css
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
add a comment |
Ok, this is driving me a bit batty. I am using the jQuery .css() method to try to set the multiple flexbox display properties needed for a class. Problem is, it only keeps the last one. Any idea on how to do this with jQuery, or is it not possible?
Here's what I've tried so far:
$(".department-name").css({
'display' : '-webkit-box',
'display' : '-webkit-flex',
'display' : '-moz-box',
'display' : '-ms-flexbox',
'display' : 'flex'
});
That doesn't work, it just gets the last one and not the others. I am manipulating a text element on a page based on how many line wraps it has (its height) and want to hide it with display:none (initial CSS value), manipulate it, then display it with the flex properties it had before I started changing the JS code to deal with the multiple line problem. Ideas?
javascript jquery html css
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
Ok, this is driving me a bit batty. I am using the jQuery .css() method to try to set the multiple flexbox display properties needed for a class. Problem is, it only keeps the last one. Any idea on how to do this with jQuery, or is it not possible?
Here's what I've tried so far:
$(".department-name").css({
'display' : '-webkit-box',
'display' : '-webkit-flex',
'display' : '-moz-box',
'display' : '-ms-flexbox',
'display' : 'flex'
});
That doesn't work, it just gets the last one and not the others. I am manipulating a text element on a page based on how many line wraps it has (its height) and want to hide it with display:none (initial CSS value), manipulate it, then display it with the flex properties it had before I started changing the JS code to deal with the multiple line problem. Ideas?
javascript jquery html css
javascript jquery html css
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
asked May 26 '16 at 20:32
multimediavtmultimediavt
61
61
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
$('.department-name').addClass('test1');
css:
.test1{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
1
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
add a comment |
Store it in a variable:
var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
add a comment |
Nevermind. There is an h4 inside that .departmentname div that I changed the display property for, so problem solved. Thanks for the feedback though.
edited May 26 '16 at 21:34
jasonmp85
5,43122039
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37470447%2fhow-to-set-multiple-css-display-property-values-with-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
$('.department-name').addClass('test1');
css:
.test1{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
1
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
add a comment |
$('.department-name').addClass('test1');
css:
.test1{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
1
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
add a comment |
$('.department-name').addClass('test1');
css:
.test1{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
$('.department-name').addClass('test1');
css:
.test1{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
You can use addClass() method to add test class into your element. in css() method display property must be getting overrides hence the last one is only applying.
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
edited Jun 7 '16 at 6:53
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
answered May 26 '16 at 20:41
PushpendraPushpendra
1,589925
1,589925
1
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
add a comment |
1
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
1
1
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
Definitely better than my answer. This is the way to go.
– Dan Weber
May 26 '16 at 20:46
add a comment |
Store it in a variable:
var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
add a comment |
Store it in a variable:
var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
add a comment |
Store it in a variable:
var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
Store it in a variable:
var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>var displayStyle = [
'display: -webkit-box',
'display: -webkit-flex',
'display: -moz-box',
'display: -ms-flexbox',
'display: flex'
].join(';');
$(document).ready(function() {
$(".department-name").attr('style', displayStyle);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='department-name'>TEST</div>answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
edited May 26 '16 at 20:43
answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
answered May 26 '16 at 20:36
Dan WeberDan Weber
1,1691622
1,1691622
add a comment |
add a comment |
Nevermind. There is an h4 inside that .departmentname div that I changed the display property for, so problem solved. Thanks for the feedback though.
edited May 26 '16 at 21:34
jasonmp85
5,43122039
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
add a comment |
Nevermind. There is an h4 inside that .departmentname div that I changed the display property for, so problem solved. Thanks for the feedback though.
edited May 26 '16 at 21:34
jasonmp85
5,43122039
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
add a comment |
Nevermind. There is an h4 inside that .departmentname div that I changed the display property for, so problem solved. Thanks for the feedback though.
edited May 26 '16 at 21:34
jasonmp85
5,43122039
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
Nevermind. There is an h4 inside that .departmentname div that I changed the display property for, so problem solved. Thanks for the feedback though.
edited May 26 '16 at 21:34
jasonmp85
5,43122039
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
edited May 26 '16 at 21:34
jasonmp85
5,43122039
edited May 26 '16 at 21:34
jasonmp85
5,43122039
edited May 26 '16 at 21:34
jasonmp85
5,43122039
5,43122039
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
answered May 26 '16 at 20:38
multimediavtmultimediavt
61
61
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f37470447%2fhow-to-set-multiple-css-display-property-values-with-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
