I am trying to change the UL image in the CSS folder using jQuery. This is for a Twitter stream, where the avatar of the account posting is changed alongside the tweet.
Using .css is pretty straight forward, but I am struggling to change the URL for the new image.
Here is my client code:
$(document).ready(function(){
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('info', function(data){
console.log("this is teh question" + " " + data);
$("#tweets").prepend("<li>" + data + "</li>");
});
socket.on('reply', function(data){
console.log("this is my reply" + " " + data);
$("#messages").prepend("<li>" + data + "</li>");
});
socket.on('userPic', function(data) {
console.log("the userPic: " + data);
$("ul#tweets").css("list-style-image: url", data);
});
});
And the CSS:
body {
font: 13px Helvetica, Arial;
max-width: 1250px;
width: 100%;
margin: auto;
}
form {
background: #fff;
padding: 10px;
width: calc(100% - 20px);
display: inline-block;
border-bottom: 1px solid #ccc;
}
form input {
border: 3px inset;
padding: 7px 5px;
width: calc(100% - 140px);
margin-right: 10px;
display: inline-block;
font-size: 15px;
}
form button {
width: 110px;
background: #177cc1;
color: #fff;
border-radius: 6px;
text-transform: uppercase;
font-size: 22px;
border: none;
padding: 5px 10px;
display: inline-block;
cursor: pointer;
}
form button:hover {
background: #177cee;
}
form button:active {
background: #177caa;
}
form button:focus {
outline: 0;
}
.container {
display: inline-block;
width: calc(100% - 60px);
padding: 20px;
margin: 5px 10px 20px;
background: #222;
}
.content {
display: inline-block;
width: 100%;
box-shadow: 1px 1px 1px 1px #555;
border: 1px solid #555;
}
.tweets_container {
display: inline-block;
width: 100%;
background: #fff;
}
.header {
font-size: 32px;
text-align: center;
text-transform: uppercase;
color: #fff;
background: #333;
padding: 15px;
}
#messages, #tweets {
display: inline-block;
margin: 5px;
padding: 10px;
width: calc(50% - 32px);
}
#tweets li, #messages li {
padding: 10px;
font-size: 18px;
}
#messages {
background: #444;
color: #fff;
}
ul#tweets {
list-style-image: url("");
height: 100px;
width: 100px;
}
ul#messages {
list-style-image: url("");
height: 100px;
width: 100px;
}
#tweets {
background: #fff;
color: #333;
}
.footer {
}
I believe this:
$("ul#tweets").css("list-style-image: url", data);
should be changed to:
$("ul#tweets").css("list-style-image", "url('"+data+"')");
Without looking at your nodejs and socket.io, check if socket.on('userPic', function(data) {, the userPic event is being fired. If so, check if the valid of data is valid for this scenario.
The way list-style-image works is that it requires a working url in a format of list-style-image:url(''), so your data argument needs to be a valid image path wrapped by parentheses as well as quotes.
Because css just deals with simple property value pairs, your JS will need to update the entire of the value in order to work. Here is an example, click on the image to see the change (I used background image for simplicity, there's no difference beyond the name of the property and the principle of providing a fully formed property value is demonstrated) ...
$('.image').css(
'background-image',
'url("http://lorempixel.com/400/200/sports/")'
);
You would use something like this to take a variable:
$('.image').css(
'background-image',
'url("' + data + '")'
);
This is the same as any other css property change. The whole value on the right needs to be updated in order for it to work. A similar problem people sometimes encounter is forgetting to add a unit to size value such as width and putting a number straight in:
.css('width', number); // wrong
.css('width', number + '%'); // right
Related
What I want to do is when I click the task it will have a line through the text means that I'm done with the task. but the add event listener function for this is not working, I'm working with the javascript toggle and that's all I can think of right now to achieve this functionality.
Is there another way to do this? I searched on the internet and it seems complicated when I'm trying to figure it out.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
taskOutput.innerHTML += `<div class="task">
<span id="taskname">${newTasks} </span>
<button class="delete" id="deleteButton"><i class="fa-solid fa-trash"></i> </button>
</div>
`;
//delete
let deleteBtn = document.querySelector("#deleteButton");
deleteBtn.addEventListener("click", function() {
this.parentNode.remove();
});
//line through
let theTask = document.querySelectorAll(".task");
theTask.addEventListener("click", function() {
this.classList.toggle("completed");
});
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kumbh Sans', sans-serif;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 30px 40px;
}
#new-task {
position: relative;
background-color: white;
padding: 30px 20px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 30px 20px;
margin-top: 50px;
border-radius: 10px;
width: 100%;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<body>
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
<script src="/script.js"></script>
</body>
querySelectorAll will return the list of nodes matching the selector tasks. So you have to iterate through each of those nodes and add your listener. See the below code snippet
let theTasks = document.querySelectorAll(".task");
theTasks.forEach((task) => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
});
});
theTask is a list of nodes. Trying to attach event listener on this list is causing issues.
Also, you will be inserting lots of buttons with same id deleteButton and spans with same id taskname which is incorrect and can cause undefined behavior.
For theTask fix, you may want to do something like:
let theTasks = [...document.querySelectorAll(".task")];
theTasks.forEach(task => {
task.addEventListener("click", function() {
this.classList.toggle("completed");
})
});
Using innerHTML to create manipulate the DOM for an application like a todo list is probably not a good idea. The answers to Advantages of createElement over innerHTML? give good explanations why.
It is worth noting that in the innerHTML code, the span and the button are created with an id and so all of these elements will have the same id. It is also probably not a good idea to have duplicate ids on one page. Why are duplicate ID values not allowed in HTML? explains why.
Also, adding event listeners to every new task is also probably not a good idea. What is DOM Event delegation? gives a good explanation why.
Finally, the Difference between HTMLCollection, NodeLists, and arrays of objects and Document.querySelectorAll() explain how to get lists of elements that can be manipulated.
So, I have rewritten the task creation code in the addBtn.addEventListener to show one way how this could be done with document.createElement().
And I have created a separate event listener on the Tasks container div, which handles both task deletion and task completion.
I also added the following CSS so that clicking on a trash can icon is handled by the parent button. Without this CSS, clicking on an icon would not delete the task.
div#tasks i {
pointer-events: none;
}
To make the todo list more visible in the code snippet below, I reduced the heights, margins, and paddings of some of the elements in the CSS.
I also added a link to the font awesome icon library.
const addBtn = document.querySelector("#push");
const taskInput = document.querySelector("#taskInput");
const taskOutput = document.querySelector("#tasks");
taskOutput.addEventListener("click", function(event) {
if (event.target && event.target.nodeName === "SPAN") {
event.target.classList.toggle("completed");
}
if (event.target && event.target.nodeName === "BUTTON") {
event.target.parentNode.remove();
}
});
addBtn.addEventListener("click", function() {
let newTasks = taskInput.value;
if (newTasks.length == 0) {
alert("Please enter a task");
} else {
// Create a task DIV
const newTaskElement = document.createElement("div");
newTaskElement.classList.add("task");
// Create a SPAN with the task name
const newTaskNameElement = document.createElement("span");
const taskTextnode = document.createTextNode(newTasks);
newTaskNameElement.appendChild(taskTextnode);
// Create a BUTTON with a TRASH CAN ICON
const newTaskDeleteButton = document.createElement("button");
const deleteImageElement = document.createElement("i");
deleteImageElement.classList.add("fa-solid", "fa-trash");
newTaskDeleteButton.appendChild(deleteImageElement);
// Append the SPAN and the BUTTON to the task DIV
newTaskElement.appendChild(newTaskNameElement);
newTaskElement.appendChild(newTaskDeleteButton);
// Append the task DIV to the TASK LIST DIV
taskOutput.appendChild(newTaskElement);
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient( 90deg, rgba(241, 206, 221, 1) 0%, rgba(124, 184, 254, 1) 100%);
font-family: 'Kumbh Sans', sans-serif;
}
/* ADDED TO MAKE SURE THAT THE TRASH ICON DOES NOT PROCESS CLICKS */
div#tasks i {
pointer-events: none;
}
.container {
border: 2px solid white;
width: 50%;
min-width: 450px;
margin: auto;
padding: 3px 4px;
}
#new-task {
position: relative;
background-color: white;
padding: 6px 4px;
border-radius: 1em;
}
#new-task input {
width: 70%;
height: 45px;
font-family: 'Manrope', sans-seif;
font-size: 1.2em;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#new-task input:focus {
outline: none;
border-color: violet;
}
#new-task button {
font-family: 'Manrope', sans-seif;
position: relative;
float: right;
width: 25%;
height: 45px;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
border: none;
background-color: violet;
color: white;
cursor: pointer;
}
#tasks {
background-color: white;
padding: 6px 4px;
margin-top: 5px;
border-radius: 10px;
width: 100%;
min-height: 50px;
}
.task {
background-color: white;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid violet;
cursor: pointer;
}
.task span {
font-size: 18px;
font-weight: 400;
}
.task button {
background-color: violet;
color: white;
height: 100%;
width: 40px;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.task button:hover {
background-color: red;
}
.completed {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
<div class="container">
<div id="new-task">
<input type="text" name="" id="taskInput" placeholder="Task to be done" />
<button id="push">ADD</button>
</div>
<div id="tasks"></div>
</div>
This question already has an answer here:
Print in Landscape format [duplicate]
(1 answer)
Closed 1 year ago.
I created a project using JavaScript where user can generate PDF document on button click. Everything is perfect except two things though I am not sure if it can be made worked. So here's the below that I did so far:
HTML:
<div class="card-body" id="card">
</div>
<input type="button" id="createDoc" value="Generate PDF" />
JavaScript:
//Generate pdf
$("body").on("click", "#createDoc", function () {
var sTable = document.getElementById('card').innerHTML;
var style = "<style>";
style = style + "body { border: 2px solid #1f497d; padding: 4%; margin: 0; }";
style = style + "table { width: 100%; font: 17px Calibri; } #showImages { height: 140px; width: 180px; } #BoxLeft { font-size:14px; width: 100%; margin: 0 auto; margin-top: 6%; height: 40px; } .Box1, .Box2 { float: left; width: 15%; } .box { height: 25px; border: 1px solid #bdbdbd; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px #bdbdbd; -webkit-box-shadow: 0 0 10px #bdbdbd; box-shadow: 0 0 10px #bdbdbd; } .Box1 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; } .Box2 { background-color: white; -webkit-print-color-adjust: exact; } #BoxRight { font-size:14px; width: 100%; margin: 0 auto; margin-top: -12%; height: 40px; } .Box3, .Box4 { float: right; width: 15%; } .Box3 { -webkit-print-color-adjust: exact; } .Box4 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; }";
style = style + "table, td { border: solid 2px #1f497d; border-collapse: collapse; font-size:14px;";
style = style + "padding: 2px 3px;text-align: center; } #projects th { height:10px; font-size:14px; background-color: #1f497d; -webkit-print-color-adjust: exact; color: white; }";
style = style + ".detailsWidth { width:60%; } .checked { color: gray; } #projects { margin-top: 9%; } .action, .hideId, .hide, .hideDate { display:none; } .top { margin-top: -5%; margin-left: 4%; } .topAside { margin-top: -5%; margin-left: 4%; } .heading { margin-top:3%; text-align:center; } .logoGpp { -webkit-print-color-adjust: exact; height: 140px; width: 250px; display: block; margin-left: auto; margin-right: auto; }";
style = style + "</style>";
var win = window.open('', '', 'height=700,width=700');
win.document.write("<html><head>");
win.document.write(style);
win.document.write("</head>");
win.document.write("<body><img class='logoGpp' src='/img/logo.jpg' /><div class='top topAside'><div id='BoxLeft'><div class='Box1'><div class='box'><h4 class='heading'>Job Reference: </h4></div></div><div class='Box2'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div></div></div>");
win.document.write("<div class='top'><div id='BoxRight'><div class='Box3'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div><div class='Box4'><div class='box'><h4 class='heading'>Initiation Date: </h4></div></div></div></div><br />");
win.document.write(sTable);
win.document.write("</body></html>");
win.document.close();
win.print();
});
So using the above, I am retrieving all data from a table that's appended to div a card (With a id). It renders content perfectly in the print preview with PDF format. But I am willing to know if it's possible to render the format in landscape and A4 paper size using the above JavaScript code, so I can render it by default with those properties. Right now, I've to do it manually in the print preview section.
There is an experimental CSS feature to set a suggestion for the default settings inside the print preview dialog, currently only supported by Chrome and browsers with a Chromium base:
https://developer.mozilla.org/en-US/docs/Web/CSS/#page/size
But in general, my impression of your provided code is that it's not generating a PDF file but it opens a new window or tab with an HTML page so the user has to print this page using a virtual PDF printer.
There are many libraries for PHP which generate a real PDF file from HTML content. Maybe one of them could be a sustainable solution for you.
One of many libraries doing that is Dompdf:
https://github.com/dompdf/dompdf
$(function() {
$('.forminput input[type="text"]').on('input propertychange', function() {
var $this = $(this);
var visible = Boolean($this.val());
$this.siblings('.glyphicon').toggleClass('hidden', !visible);
}).trigger('propertychange'); //nema potrebe za njim
$('.glyphicon').click(function() {
$(this).siblings('input[type="text"]').val('')
.trigger('propertychange').focus();
$('.results').empty();
});
$('.forminput').on('submit', function(event) {
event.preventDefault();
var typed = $('.nice').val();
$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
action: 'query',
srsearch: typed,
format: 'json',
list: 'search'
}, function(data) {
$('.results').empty();
console.log(data);
$.each(data.query.search, function(index, item) {
$('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
})
})
})
})
body {
background: rgb(9, 43, 64);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
height: 90vh;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.glyphicon {
color: #B2DFDB;
}
.textbox {
text-align: center;
}
.randomArticle {
color: #B2DFDB;
font-size: 1.4em;
}
.randomArticle:hover {
text-decoration: none;
color: pink;
cursor: pointer;
}
.randomArticle:link {
text-decoration: none;
color: #B2DFDB;
}
form {
margin-top: 30px;
margin-bottom: 30px;
}
form .nice {
width: 300px;
border-radius: 10px;
border: 5px solid orange;
background: transparent;
color: white;
padding: 7px 15px;
}
form .nice:focus {
outline: none;
}
.button {
border-radius: 10px;
border: 5px solid orange;
padding: 7px 15px;
margin-left: 20px;
background: transparent;
color: #B2DFDB;
}
.button:hover {
background: #00897B;
}
.button:focus {
outline: none;
}
.append {
color: black;
}
.append:hover {
text-decoration: none;
}
.appendsearch {
background: rgb(230, 230, 231);
margin: 20px 70px 20px 70px;
padding: 10px 20px;
color: black;
border-left: 4px solid rgb(9, 43, 64);
font-weight: 500;
}
.appendsearch h1 {
font-size: 20px;
font-weight: bold;
}
.appendsearch p {
font-size: 15px;
}
.appendsearch:hover {
border-left: 4px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='wrapper'>
<div class='textbox'>
<a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
<form class='forminput'>
<input class='nice' type='text'>
<span class='glyphicon glyphicon-remove hidden'></span>
<input class='button' type='submit' value='Search'>
</form>
</div>
<div class='results'></div>
</div>
</div>
</body
I cant get elements to be vertically centered before and after search results are inserted. I tried a lot of options but all I get is situation where search box is inserted on the left side of search result.
Here is the sample > http://codepen.io/Todorovic/pen/PGrqOp
What I did to make this work, is to add some line of code with jQuery.
To to center div horizontally and vertically change css:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : function() {return -$(this).outerWidth()/2},
'margin-top' : function() {return -$(this).outerHeight()/2}
});
For working with dimensions if you are not familiar check:
http://api.jquery.com/outerwidth/
http://api.jquery.com/outerheight/
And down in your code after submit form change again css of div to put it on top of page:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top':'0%',
'margin-top' : '30px',
'margin-left' : function() {return -$(this).outerWidth()/2},
});
After append results add margin-top for div:
$('.results').css({
'margin-top': $('.textbox').height()
})
})
Here is CodePen example:
http://codepen.io/anon/pen/NRZwEJ
Hope the elements are not dynamic, and you have a fixed structure of elements around the search box. After finalizing the element structure and the styling of them you have to identify the height of the textbox element. At the moment it is 47px. We will use this value in the following css.
Next add the following styles into the css.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
Please note that the value of the margin-top is half of the 47px( half of the textbox element. )
Edit
Add the following line into your jquery code.
$('.forminput').on('submit', function(event) {
$('.textbox').addClass('pull-up');
After that, update you css with the following additional styles.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
.textbox.pull-up {
position: relative;
top: auto;
}
Thank you for the help in advance.
This project is a signup form that will use a chat system to collect the user's profile details during their onboarding process. This is my first jQuery project, so I am struggling to spot my mistakes.
My jQuery should append the value in the textarea to the #message-feed div and apply the CSS classes of .message, .bubble and .user to the new element it creates.
However, when I type into the text area and click submit, it flashes the value I have just typed with no styling in the message feed, but it instantly disappears.
The reason for this CSS structure is the interchangeability between the .bot and .user classes depending on whether it is a question presented to the user by the website, or a user's response to a question.
Here is a link for a JSFiddle but it loads very differently than on my local machine (JSFiddle shows errors.
HTML
<div id="container">
<div id="message-feed">
<h1>Let's get to know you a little bit more…</h1>
</div>
<form method="POST">
<div id="text-response">
<textarea id="text-response" placeholder="Type in here…"></textarea>
</div>
<input type="submit" class="submit-response">
</form>
</div>
CSS
#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}
#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}
.message {
padding: 0px 15px 15px 15px;
width: 90%;
}
.message:after {
content:"";
display: block;
clear: both;
}
.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}
.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}
.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}
#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}
textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}
.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}
.submit-response:hover {
opacity: 0.5;
}
jQuery
$(document).ready(function() {
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
});
2 problems over there :
1/ You're not preventing the event default behavior. That means whenever you're clicking on the button which is a submit input, it will send a POST request. So the page will change. To prevent this :
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
2/ You're not actually adding the classes. $.append appends elements, not classes. So :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessageText = $('textarea[name=text-response]').val(),
$newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');
$('#message-feed').append($newMessage);
});
Now obviously it doesn't have to be a span, it could be anything else. It still has to be an element.
Also, this is only resolving the issues you had on the front end. You'll need AJAX to send the POST to the server side and get the data without refreshing/leaving the page. But that's another topic.
The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:
JS
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.quickLinks').click(function() {
var options = {direction: 'right'};
var duration = 400;
jQuery('#quickLinks').slideToggle(options, duration);
jQuery('.quickLinks').toggleClass('sidebar-blue');
});
jQuery('.quickLinks').hover(function() {
jQuery(this).css({
'border-top-color': '#1C8BE6',
'color': '#1C8BE6'
});
}, function() {
jQuery(this).css({
'border-top-color': '#003663',
'color': '#fff'
});
});
});
CSS
/** Style for the button & div **/
.sidebar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
display: block;
}
.quickLinks, #quickLinks {
float: right;
margin-left: 100%;
width: 230px;
}
.quickLinks {
cursor: pointer;
padding: 10px 0px 5px;
background-color: #003663;
white-space: nowrap;
text-align: center;
font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 26px;
line-height: 26px;
color: #fff;
border-top: 3px solid #003663;
border-radius: 5px 5px 0px 0px;
}
.quickLinks.sidebar-blue {
line-height: 20px;
color: #1C8BE6 !important;
border-top: 3px solid #1C8BE6 !important;
}
#quickLinks {
position: relative;
display: none;
background-color: #003663;
right: 0px;
z-index: 100;
}
#quickLinks > ul {
list-style-type: none;
float: right;
margin: 5px 10px;
padding-left: 0px;
}
#quickLinks > ul > a > li {
color: #fff;
white-space: nowrap;
}
#quickLinks > ul > a > li:hover {
color: #1C8BE6;
}
When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.
The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.
Here's where I'm at so far :
Fiddle