Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
i find jspath of button and try .click() but its not working kindly help me
document.querySelector("#results > div.results_navigation.top_results_navigation.displayButtons > div.results_pager.ui-widget-content > div.arrow_container > a:nth-child(4) > span.ui-button-icon-primary.ui-icon.ui-icon-triangle-1-e").click()
i want click Next button websitehttps://www3.wipo.int/branddb/en/#
I’m using Typescript in my React Native app and I define the following array:
const arr: string[] = Platform.select({
ios: ["a", "b", "c"],
android: ["a", "b", "c"]
})
VsCode underlines arr and tells me Type 'string[] | undefined' is not assignable to type 'string[]', so I changed it to
const arr: string[] | undefined = Platform.select({
ios: ["a", "b", "c"],
android: ["a", "b", "c"]
})
VsCode removes the underline on arr in the definition, but when I use it in my code it underlines it there and says Argument of type 'string[] | undefined' is not assignable to parameter of type 'string[]'
I think the problem is that Platform.select() might return undefined, but then I’m using arr in my code for operations that require it to have type string[] instead of string[]. How can I modify my code to remove all these warnings?
convert 9×9 array into 9 (3×3) array in javascript?
i have written the code, but its not pushing the 3×3’s into separate array.
i want 9 3×3 arrays
let array =[[1, 2, 3, 4, 5, 6, 7, 8, 9],
[2, 3, 1, 5, 6, 4, 8, 9, 7],
[3, 1, 2, 6, 4, 5, 9, 7, 8],
[4, 5, 6, 7, 8, 9, 1, 2, 3],
[5, 6, 4, 8, 9, 7, 2, 3, 1],
[6, 4, 5, 9, 7, 8, 3, 1, 2],
[7, 8, 9, 1, 2, 3, 4, 5, 6],
[8, 9, 7, 2, 3, 1, 5, 6, 4],
[9, 7, 8, 3, 1, 2, 6, 4, 5]];
let final=[];
let row=[0,1,2];
let col=[0,1,2];
let counter=0;
for(let i=0;i<=array.length-1;i+=3)
{
for(let j=0;j<=array.length-1;j+=3)
{
final.push([]);
row.forEach(ele1=>{
final[counter].push([])
col.forEach(ele2=>{
final[counter][ele1].push(array[ele1+i][ele2+j]);
})
})
counter+=1;
}
}
I am using node.js 14 and currently have a loop that is made by a recursive function and a setTimeout, something like this:
this.timer = null;
async recursiveLoop() {
//Do Stuff
this.timer = setTimeout(this.recursiveLoop.bind(this), rerun_time);
}
But sometimes this loop gets stuck and I want it to automatically notice it, clean up and restart. So I tried doing something like this:
this.timer = null;
async recursiveLoop() {
this.long_timer = setTimeout(() => throw new Error('Taking too long!'), tooLong);
//Do Stuff
this.timer = setTimeout(this.recursiveLoop.bind(this), rerun_time);
}
main() {
//Do other asynchronous stuff
recursiveLoop()
.then()
.catch((e) => {
console.log(e.message);
cleanUp();
recursiveLoop();
}
}
I can’t quite debug where it gets stuck, because it seems quite random and the program runs on a virtual machine. I still couldn’t reproduce it locally.
This makeshift solution, instead of working, keeps crashing the whole node.js aplication, and now I am the one stuck. I have the constraint of working with node.js 14, without using microservices, and I never used child process before. I am a complete beginner. Please help me!
I’m customizing a Shopify store using Archetype Themes Motion v8.0.2. I have found a code to add tabs to my product pages. I’ve added media queries to my theme.css to display the tabs as an accordion at certain breakpoints. I would like to add code to close the accordion on click. I’m okay with HTML/CSS, but don’t know any JS. I found the script online. Any help would be appreciated!
$(document).ready(function(){
$('ul.shopify-tabs > li').click(function(){
var tab_id = $(this).attr('data-tab');
$(this).parent().find('li').removeClass('current');
$('.shopify-tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
}).section-tab-head {
background: #efefef;
color: #333;
display: block;
padding: 10px 10px;
cursor: pointer;
margin: 2px;
}
@media only screen and (min-width: 481px) and (max-width: 768px),
(min-width: 1051px) {
.section-tab-head {
background: none;
display: inline-block;
margin: inherit;
margin-top: 0;
}
}
.section-tab-head.current {
background: #dbdbdb;
color: #333;
}
.shopify-tab-content {
display: none;
background: none;
padding: 15px;
width: 100%;
}
.shopify-tab-content > p {
font-size: 10pt;
font-weight: 400;
}
.shopify-tab-content.current {
display: block;
font-size: 10pt;
background: white;
margin-top: 0px;
}
.shopify-tab-content > ul {
list-style: disc;
}
.shopify-tab-content > ul ul {
list-style: circle;
}
li,
.shopify-tab-content {
margin: 10px 0;
}
.shopify-tabs .shopify-tab-content {
float: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="shopify-tabs">
<li class="section-tab-head current" data-tab="section-tab-1"> Heading 1</li>
<div id="section-tab-1" class="shopify-tab-content current">
<p>some content goes here</p>
</div>
<li class="section-tab-head" data-tab="section-tab-2"> Heading 2</li>
<div id="section-tab-2" class="shopify-tab-content">
<p>more content in this tab</p>
</div>
<li class="section-tab-head" data-tab="section-tab-3"> Heading 3</li>
<div id="section-tab-3" class="shopify-tab-content">
<p>some content is in list form:</p>
<ul>
<li>product feature</li>
<li>product feature</li>
<li>product feature</li>
</ul>
</div>
</ul>The calendar I’m using takes in a XML with an external server sending me a JSON object.
JSON sent from server
{
"AllDay": "false",
"Categorize": "1,2",
"CustomStyle": "true",
"Description": "Please work",
"EndTime": "2021-25-01T010:00:00",
"Location": "Your moms place",
"Owner": "1",
"Priority": "true",
"Recurrence": "1",
"RecurrenceEndDate": "true",
"RecurrenceRule": "FREQ=DAILY;INTERVAL=2;COUNT=10",
"RecurrenceStartDate": "true",
"RecurrenceType": "true",
"RecurrenceTypeCount": "true",
"Reminder": "true",
"StartTime": "2021-25-01T09:00:00",
"StartTimeZone": "true",
"Subject": "Bering Sea Gold",
"id": 5
}
End product XML for Calendar
<DefaultSchedule>
<AllDay>false</AllDay>
<Categorize>1,2</Categorize>
<CustomStyle i:nil="true" />
<Description i:nil="true" />
<EndTime>2017-06-01T10:30:00</EndTime>
<EndTimeZone i:nil="true" />
<Id>100</Id>
<Location>chn</Location>
<Owner>1</Owner>
<Priority i:nil="true" />
<Recurrence>1</Recurrence>
<RecurrenceEndDate i:nil="true" />
<RecurrenceRule>FREQ=DAILY;INTERVAL=2;COUNT=10</RecurrenceRule>
<RecurrenceStartDate i:nil="true" />
<RecurrenceType i:nil="true" />
<RecurrenceTypeCount i:nil="true" />
<Reminder i:nil="true" />
<StartTime>2017-06-01T09:00:00</StartTime>
<StartTimeZone i:nil="true" />
<Subject>Bering Sea Gold</Subject>
</DefaultSchedule>
There are some values that won’t be included with the json but those values will be defaulted.
How would I programmatically convert this using javascript?
I am attempting to animate an svg doughnut circle with gsap. After much testing with code and layering, I am stumped with a glitchy hover effect (which I resolve to change with pointer events) and the transform origin is only applied to a few of the expanded tabs. I am wondering if this might be that the tabs may have different a bounding box?
TLDR; Tabs are not scaling from center of circle, and glitchy hover effect
.expandtab {
pointer-events: none;
transform: fill-box;
transform-origin: -15px 25%;
}
Javascript:
const subTabs = gsap.utils.toArray(".subtab");
const expandTabs = gsap.utils.toArray(".expandtab");
const tl = gsap.timeline({ defaults: { duration: .05, } });
tl.set(expandTabs, {
visibility: "hidden",
opacity: 0,
scale: 0,
});
subTabs.forEach((subTab, index) => {
let expandTab = expandTabs[index];
// Event Listener Hover on
subTabs[index].addEventListener("mouseover", (event) => {
console.log("you clicked region number " + index);
tl.to(expandTab, {
visibility: "visible",
opacity: 1,
scale: 1,
});
});
// Event Listener Hover off
subTabs[index].addEventListener("mouseout", (event) => {
console.log("you exited region number " + index);
tl.to(expandTab, {
opacity: 0,
scale: 0,
visibility: "hidden",
});
});
});
I am trying to integrate a payment gateway on my website. Here is my code
products.php
<div class='row footer'>
<div class='col-5 col-lg-5'>
<button class='btn btn-action kkiapay-button'
amount-price='" . $row['price'] . "'
onclick='openKkiapayWidget()'>" . $row['action'] . "
</button>
</div>
<div class='col-7 col-lg-7 price'>
<span>XOF " . number_format($row['price']) . "</span>
</div>
</div>
main.js
openKkiapayWidget({
amount:"50000",
position:"center",
callback:"",
theme:"red",
key:"< my-api-key >"
});
Now, the problem is that there are many products with different prices; but here I can only put a static amount (50000) which applies to all products when the action button is clicked. Is there any way I can dynamically get the price of products and set it in my function in case of a product that has a different price?
I tried this but it doesn’t work
var price = $(this).amount("price");
openKkiapayWidget({
amount:""+price+"",
position:"center",
callback:"",
theme:"red",
key:"<my-api-key>"
});
DG1|1||Z3800^Single liveborn infant, delivered vaginally^I10|||A|||||||||||||||||||||
DG1|2||Z23^Encounter for immunization^I10|||S||||||||||||||||||||E|
DG1|3||A3800^Single liveborn infant, delivered vaginally^I10|||P||||||||||||||||||||E|
DG1|4||B3800^Single liveborn infant, delivered vaginally^I10|||S||||||||||||||||||||E|
The above message sample is formatted in a way that I only want to start reading the values of DG1 when DG1.6 = P. And then read in the DG1 segments after when DG1.6 is P. In the above example, I want to ignore DG1|1, DG1|2 and then only store the values of DG1|3 and DG1|4. I tried using localeCompare but soon realized that doesn’t look like what I can easily use. I also tried assigning A, P, and S numerical values to compare which I think will work (essentially adding |1|+1 when A = 1, |2|+2 when S = 2, etc. But I feel like I’m complicating it.
DG1 is a dynamic set in HL7 so it can be of any length.
Here’s my current code set that will ignore DG1 segment when DG1.6 is “A”.
var dxXML = '';
var dg1Count = msg['DG1'].length();
for (var i = 0; i < dg1Count; i++) {
var dx;
var poa;
if (msg['DG1'][i] != undefined) {
if (msg['DG1'][i]['DG1.6']['DG1.6.1'].toString() == 'A' || msg['DG1'][i]['DG1.6']['DG1.6.1'].toString() == 'ADMITTING') {
//format: <Dx Code="${dx0}" POA="${poa0}" Pos="1"/>
dx = '';
poa = '';
if (dxXML != '') {
dxXML = dxXML + 'n<Dx Code="' + dx + '" POA="' + poa + '" Pos="' + i + '"/>';
} else {
dxXML = '<Dx Code="' + dx + '" POA="' + poa + '" Pos="' + i + '"/>';
}
}
//normal dx. the first non-blank dx will be imported as PDX. This means the i can be any integer.
else {
dx = msg['DG1'][i]['DG1.3']['DG1.3.1'].toString();
poa = msg['DG1'][i]['DG1.26']['DG1.26.1'].toString();
if (dx == '') continue;
if (poa == 'E' || poa == '') {
poa = '1';
}
if (dxXML != '') {
dxXML = dxXML + 'n<Dx Code="' + dx + '" POA="' + poa + '" Pos="' + i + '"/>';
} else {
dxXML = '<Dx Code="' + dx + '" POA="' + poa + '" Pos="' + i + '"/>';
}
}
}
else {
//do nothing to not add the blank ones.
}
}
$c('DX_DOM', dxXML);
Any guidance on how to accomplish this will be appreciated.
I am currently working on my apps backup options. One option is to store a backup file to the users google drive. I am using VUE-GAPI wrapper. Right now I can successfully log the user in and connect to google drive to get a list of backup files.
What I am having a problem with is keeping the user logged in when the app is closed and then re-launched so that it automatically re connects to the users google drive.
I would like to know how that can be achieved with the google API.
I can get the users google Id and access token from when they login. I was thinking of saving that to the backend database and then on launch of my app process the information to re establish the authenticated link to the users drive. But I am unsure where to use this information for re authentication or if it is even possible to use that information.
this is what I have for my login
login() {
window.gapi.auth2.getAuthInstance().signIn({
scope: "https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/drive.metadata"
}).then(() => {
console.log('successfully authenticated');
this.authenticated = true;
this.userData = this.$gapi.getUserData();
this.$gapi.refreshToken
console.log(this.userData);
})
.catch((err) => {
console.error("Login call failed: %s", err.message);
});
},
Any insight on this issue would be helpful or even an alternate solution to get this done would be great.
There is a list I have with 7 entries. On the picture below you can see the area which I marked purple: 6 entries. You see the area which I marked blue, all the 7 entries got the same <a class “FPmhX notranslate MBL3Z”.
My question is how can I get the href of each entry and store them all in a list/array? In this example, the href of first entry is /foo.96/.
If my question is not clear please tell me and I will try to describe it differently! 🙂
I am trying to add a click event function to each name element in my function below for the autocomplete. When you click on the movie title, it should send that title through the getMovie and getQuotes function. However, the current code takes the last name in the autocomplete list and sends that title through, instead of the user click. I am not sure when the best solution is to the problem.
var sendTitle = function() {
var title = $("input[name='movie-search-title']").val();
getMovie(title)
getQuotes(title)
}
$("input[name='movie-search-title']").keydown(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
sendTitle();
}
})
// movie autocomplete
var $input = document.getElementById('searchBox');
var baseUrl = "http://sg.media-imdb.com/suggests/";
var $result = document.getElementById('result');
$input.addEventListener('keyup', function() {
//clearing blank spaces from input
var cleanInput = $input.value.replace(/s/g, "");
//clearing result div if the input box in empty
if (cleanInput.length === 0) {
$result.innerHTML = "";
}
if (cleanInput.length > 0) {
var queryUrl = baseUrl + cleanInput[0].toLowerCase() + "/" +
cleanInput.toLowerCase() +
".json";
$.ajax({
url: queryUrl,
dataType: 'jsonp',
cache: true,
jsonp: false,
jsonpCallback: "imdb$" + cleanInput.toLowerCase()
}).done(function(result) {
//clearing result div if there is a valid response
if (result.d.length > 0) {
$result.innerHTML = "";
}
for (var i = 0; i < result.d.length; i++) {
var category = result.d[i].id.slice(0, 2);
if (category === "tt" || category === "nm") {
//row for risplaying one result
var resultRow = document.createElement('p');
resultRow.setAttribute('class', 'resultRow')
//creating and setting description
var description = document.createElement('div');
description.setAttribute('class', 'description');
var name = document.createElement('h4');
var snippet = document.createElement('h5');
if (category === "tt" && result.d[i].y) {
name.innerHTML = result.d[i].l + " (" + result.d[i].y + ")";
} else {
name.innerHTML = result.d[i].l;
}
snippet.innerHTML = result.d[i].s;
var nameText = name.innerHTML
$(description).append(name);
$(resultRow).append(description);
$("#result").append(resultRow);
}
// problem here!
$(name).click(function(e) {
e.preventDefault();
var title = nameText.slice(0, nameText.lastIndexOf(" "))
console.log(title)
getMovie(title)
});
}
});
}
});
// movie search
var getMovie = function(title) {
$("#main").removeClass("hidden");
$("#search-form").trigger("reset");
//format the OMDB api url
var apiUrl = `http://www.omdbapi.com/?t=${title}&plot=full&apikey=836f8b0`
//make a request to the url
fetch(apiUrl)
.then(function(response) {
// request was successful
if (response.ok) {
response.json().then(function(movieData) {
console.log(movieData)
showMovie(movieData)
});
} else {
alert("Error: title not found!");
}
})
.catch(function(error) {
alert("Unable to connect to cine score app");
});
};
var getMovieId = function(currMovieTitle) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/find?q=${currMovieTitle}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.ajax(settings).done(function(response) {
console.log(response);
var specialId = response.results[0].id
var specialId = specialId.replace("/title/", "")
var specialId = specialId.replace("/", "")
console.log(specialId)
getSoundTrack(specialId)
});
}
var getSoundTrack = function(specialId) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/get-sound-tracks?tconst=${specialId}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.ajax(settings).done(function(soundTrackData) {
console.log(soundTrackData);
});
}
var getQuotes = function(title) {
$("#quote-items").html("");
$("#movie-quotes-heading").removeClass("hidden");
var title = title.replaceAll(" ", "_")
const settings = {
"async": true,
"crossDomain": true,
"url": `https://movie-and-tv-shows-quotes.p.rapidapi.com/quotes/from/${title}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "movie-and-tv-shows-quotes.p.rapidapi.com",
"x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.ajax(settings).done(function(quoteData) {
console.log(quoteData);
showQuotes(quoteData)
})
.fail(function(xhr, status, error) {
//Ajax request failed.
var errorMessage = xhr.status + ': ' + xhr.statusText
console.log(`Error - ${errorMessage}`);
$("#movie-quotes-heading").addClass("hidden");
});
}
var showMovie = function(movieData) {
$("#movie-title").text(movieData.Title)
let currMovieTitle = movieData.Title
getMovieId(currMovieTitle);
$("#year-rating").text(`${movieData.Year}, ${movieData.Rated}`)
$("#genre").text(`${movieData.Genre}`)
$("#synopsis").text(movieData.Plot)
$("#poster").attr("src", movieData.Poster);
$("#cast-list").text(`Main Cast: ${movieData.Actors}`)
$("#director").text(`Director: ${movieData.Director}`)
$("#writer").text(`Writer(s): ${movieData.Writer}`)
$("#imdb-rate").text(`${movieData.Ratings[0].Source} - ${movieData.Ratings[0].Value}`)
$("#tomatoes-rate").text(`${movieData.Ratings[1].Source} - ${movieData.Ratings[1].Value}`)
$("#metacritic-rate").text(`${movieData.Ratings[2].Source} - ${movieData.Ratings[2].Value}`)
var tomatoesRate = (movieData.Ratings[1].Value).replace("%", "")
parseInt(tomatoesRate)
if (tomatoesRate <= 60) {
$("#tomatoes-rate").attr("src", "https://www.clipartmax.com/png/full/351-3516739_cherry-tomato-clipart-tomatoe-rotten-tomatoes-icon-png.png")
} else if (tomatoesRate >= 60) {
$("#tomatoes-rate").attr("src", "https://www.clipartmax.com/png/full/50-503981_rotten-tomatoes-fresh-logo.png")
}
}
var showQuotes = function(quoteData) {
$("#movie-quotes-heading").text("Movie Quotes")
quoteData.forEach(quoteItem => {
var carouselItem = document.createElement("div")
$(carouselItem).html(`<h4 class='quote'>"${quoteItem.quote}"<br><br><span class='quote-character'>-${quoteItem.character}</span></h4><br>`)
$(carouselItem).appendTo("#quote-items");
});
}body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.hidden {
display: none;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #40376E;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
form {
width: 100%;
display: flex;
gap: 20px;
flex-direction: row;
}
#results {
display: flex;
flex-direction: column;
justify-content: left;
width: 20%;
text-align: left;
color: antiquewhite;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #40376E;
font-size: 50px;
}
.logo {
color: #40376E;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
#tomatoes-rate {
width: 80%;
height: 80%;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
color: #40376E;
}
.carousel-indicators li {
border-color: #40376E;
}
.carousel-indicators li.active {
background-color: #40376E;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #40376E;
border-radius: 0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0, 0, 0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #40376E;
background-color: #fff !important;
color: #40376E;
}
.panel-heading {
color: #fff !important;
background-color: #40376E !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #40376E;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #40376E;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #40376E !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #40376E;
}
.slideanim {
visibility: hidden;
}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Cine Score</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" </head>
<body id="mainPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- Navigation Menu -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Cine Score</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#past-searches">Past Searches</a></li>
<li><a href="#favorite-soundtracks">Favorite Soundtracks</a></li>
</ul>
</div>
</div>
</nav>
<!-- Movie Search Jumbotron -->
<div id="movie-search" class="jumbotron text-center">
<h1>Search for a movie!</h1>
<form id="search-form">
<input id="searchBox" name="movie-search-title" type="text" class="form-control" size="50" placeholder="movie title" />
<button id="searchBtn" type='button' class="btn btn-danger" onclick="sendTitle()">Search</button>
</form>
<div id="result"></div>
</div>
<main id="main" class=hidden>
<!-- Container (main movie info) -->
<div id="movie-info" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2 id="movie-title"></h2><br>
<h4 id="year-rating"></h4>
<h4 id="genre"></h4><br>
<p id="synopsis"></p>
<br><button id="get-soundtrack" class="btn btn-default btn-lg">Get the soundtrack</button>
</div>
<div class="col-sm-4">
<span id="movie-poster">
<img id="poster" src="" />
</span>
</div>
</div>
</div>
<!-- Container (cast) -->
<div id="cast" class="container-fluid bg-grey">
<div class="row">
<div id="cast-icon" class="col-sm-4">
<span>
<img src="https://cdn-icons-png.flaticon.com/512/3873/3873990.png" />
</span>
</div>
<div class="col-sm-8">
<h2>Cast</h2><br>
<h4 id="cast-list"></h4><br>
<p id="director">
</p>
<p id="writer">
</p>
</div>
</div>
</div>
<!-- Container (Score Section) -->
<div id="score" class="container-fluid">
<div class="row">
<div class="col-sm-4">
<span id="rating-img">
<img id="tomatoes-rate" src=""/>
</span>
</div>
<div class="col-sm-8 text-center">
<h2>SCORE</h2><br>
<h4 id="imdb-rate"></h4><br>
<h4 id="tomatoes-rate"></h4><br>
<h4 id="metacritic-rate"></h4><br>
</div>
</div>
</div>
<!-- Container (Sountrack Section) -->
<div id="soundtrack" class="container-fluid text-center bg-grey">
<h2>Sountrack</h2><br>
<h4 id="movie-title-soundtrack">Movie Soundtrack</h4>
<div class="container-fluid text-center">
<p>Soundtrack Image</p>
<p>List of songs</p>
<button id="save-to-favorites" class="btn btn-default btn-lg">Save to favorites!</button>
</div>
</div>
<!-- Container (Movie Quotes Section)-->
<div id="movie-quotes" class="container-fluid text-center">
<h2 id="movie-quotes-heading"></h2>
<div id="quote-items" class="carousel slide text-center" data-ride="carousel"></div>
</div>
<!-- Footer -->
<footer class="container-fluid text-center">
<a href="#mainPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"> Top </span>
</a>
</footer>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</html>I want to add a value to a variable inside the loop in my Vue.js component, like this:
<div v-for="(post, index) in posts" :key="index">
<h1 v-if="post.author =='John'">
John
{{i++}} // i is a variable in my data, I don't want this to be printed to the DOM
</h1>
</div>
I don’t want $i to be printed to the DOM. I just want it for a check later in my code.
Well the title pretty much sums it up. I really have no idea where to start. I don’t have any code to share at this point in time
If it helps, the same data is also being piped through a WebSocket server, maybe we could read the WebSocket stream with PHP?
I wish to convert my FAQ section that utilizes Jquery to smoothly slide each question up and down into pure Javascript and CSS transitions.
The reason is for optimization and making a page as lightweight as possible. My goal is to remove jquery from my website altogether because it’s unnecessary.
I have uploaded my FAQ section into an HTML page and hosted it on a URL. This way, you can try it for yourself and see it in action. Please check here.
You can click on each title, and it will slide up and down. To have an exact replica of what I currently have is proving to be difficult. I have tried CSS transitions but it seems to require changing the height. Right now, I use display: block or display: none because the height is unknown. translateY(100%) to calculate the height at runtime didn’t seem to work either.
I will insert my current Jquery code here:
<style>
#sectionFAQWrapper {
padding-bottom: 30px;
}
#sectionFAQWrapper ul {
padding: 5px 0px 12px 0px;
margin: 0px;
}
#sectionFAQWrapper ul li {
list-style-type: none;
font-size: 20px;
}
#sectionFAQTopBanner {
text-align: center;
padding: 40px 0px;
background: linear-gradient(90deg, rgb(74 79 177) 0%, rgb(31 32 82) 100%);
color: #fff;
margin-bottom: 30px;
}
#sectionFAQTopBanner h2 {
font-weight: 600;
letter-spacing: -1px;
font-size: 46px;
margin: 0;
font-family: 'Oswald';
}
.questionItemWrapper {
max-width: 1000px;
margin: 0 auto;
}
#sectionFAQWrapper h3 {
font-size: 30px;
}
#sectionFAQWrapper p {
font-size: 20px;
padding-bottom: 10px;
font-weight: 400;
margin: 0;
}
.questionItemBoldBlue {
color: #4549a5;
font-weight: 600;
}
.questionItemBoldTopBorderBlue {
border-top: none;
}
.questionItemHeader {
position: relative;
background-color: rgba(0,0,0,.03);
padding: 15px;
margin: 0px 10px;
}
.questionItemHeader div {
display: inline-block;
font-family: 'Oswald';
}
.questionItemToggle {
position: absolute;
top: 17px;
left: 14px;
content: url(https://cdn.shopify.com/s/files/1/0022/5103/0563/files/doubleDownArrowBlack.png?v=1621284261);
height: 34px;
width: 34px;
}
.questionItemRotate180 {
transform: rotate(180deg);
content: url(https://cdn.shopify.com/s/files/1/0022/5103/0563/files/doubleDownArrowBlue.png?v=1621284261);
}
.questionItemQuestion {
font-size: 28px;
padding-left: 40px;
}
.questionItemContent {
padding: 20px 20px 10px 20px;
margin: 0;
display: none;
font-family: 'Open Sans';
}
</style>
<div id="sectionFAQWrapper">
<div id="sectionFAQInner">
<div id="sectionFAQTopBanner">
<h2>FREQUENTLY ASKED QUESTIONS</h2>
</div>
<div class="questionItemWrapper questionItemBoldTopBorderBlue">
<div class="questionItemHeader">
<div class="questionItemToggle questionItemBoldBlue questionItemRotate180"></div>
<div class="questionItemQuestion questionItemBoldBlue">Title #1</div>
</div>
<div class="questionItemContent" style="display: block;">
<p><b>Content Paragraph #1</p>
<p><b>Content Paragraph #2</p>
</div>
</div>
<div class="questionItemWrapper questionItemBoldTopBorderBlue">
<div class="questionItemHeader">
<div class="questionItemToggle"></div>
<div class="questionItemQuestion">Title #2</div>
</div>
<div class="questionItemContent" style="display: none;">
<p><b>Content Paragraph #1</p>
<p><b>Content Paragraph #2</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// When DOM has loaded
$(document).ready(function() {
// FAQ section
$(".questionItemWrapper").click(function() {
$(this).find('.questionItemContent').toggle( "slow", function() {});
$(this).find('.questionItemQuestion').toggleClass("questionItemBoldBlue");
$(this).find('.questionItemToggle').toggleClass("questionItemBoldBlue");
$(this).find('.questionItemToggle').toggleClass("questionItemRotate180");
$(this).toggleClass("questionItemBoldTopBorderBlue");
});
// End of document.ready()
});
</script>