thiscodeWorks - Saving, organizing & sharing the best of code online

<?php
    include 'config.php';

    $sql = "SELECT * FROM demo ORDER BY id DESC";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
?>

        <h4 class="h5">Comments</h4>
       

       
        <h5 class="h6"><?php echo $row['name']; ?></h5>

            <div >
            <?php echo $row['message']; ?>
              </div>
     


    <?php } } ?>

JQuery Function

@shinesheray

$(function(){
//jQuery events and effects go here
);

Jquery Selectors

@shinesheray

$("h1") // element selector
$("#mainHeading") // ID selector
$(".yellow") // class selector
$("*") // selects all HTML elements
$(this) // selects current HTML element
$("button") // selects button element
$("[href]") // selects all link-based elements

creating and appending elements

@shinesheray

let newParagraph = $("<p></p>").text("This is a new paragraph.");
// creates a new paragraph

$("body").append(newParagraph); // appends newParagraph to the end of the body element

Separate scripting files

@shinesheray

<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="script.js"></script>
</head>
<!-- Used to create a scripting file incorporating jQuery -->

Events and Effects JQuery

@shinesheray

$("p").click(function(){
$("this").hide('slow');
});

Effect chaining

@shinesheray

$("button").css("color", "blue").slideDown(500).slideUp(500); // example of effect chaining

Vaihda password -sana Lockscreenille

@tarusalokangas

Settings > Advanced > Code Injection > Lock Page


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('input[type="password"]').attr('placeholder','tuanphan');
});
</script>

Kuvakoon ja sijainnin muokkaaminen mobiilissa

@tarusalokangas

@media screen and (max-width: 640px) {
#block-yui_3_17_2_1_1612436491734_12932 {
width: 130% !important;
margin: 0 auto;
right: 70px;
}
}

Poista kuva mobiilista

@tarusalokangas

@media only screen and (max-width: 768px) {
 #block-8fc91e9563250a77172c {
   display: none;
 }
}

Eri kuva mobiilissa yhdessä sectionissa

@tarusalokangas

 @media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(your-image-here);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Muokkaa tietyn kuvan kokoa

@tarusalokangas

#blockidnumber {
width: 80% !important;
margin: 0 auto;
}

Kuvan opasiteetti

@tarusalokangas

#block-yui_3_17_2_1_1612797075707_7770.image-block {filter: opacity(87%);}

Yksittäinen kuva ympyräksi

@tarusalokangas

#block-yui_3_17_2_1_1612797075707_7770.sqs-block-image img{ border-radius: 50%; }

TAI

.sqs-block-video img, .sqs-block-image img {
    border-radius: 50px;
}

Automaattisen tavutuksen poisto

@tarusalokangas

p, h1, h2, h3 {

    -webkit-hyphens: manual !important;

       -moz-hyphens: manual !important;

        -ms-hyphens: manual !important;

            hyphens: manual !important;

  }

Fontit mobiilissa

@tarusalokangas

/// mobiilissa fonttikoko
@media screen and (max-width: 640px) {
p {font-size: __ }
h1 {font-size: __ }
h2 {font-size: __ }
h3 {font-size: __ }}


/// mobiilissa fonttikoko tietty block
@media (max-width:640px) {
#block-yui_3_17_2_1_1606899025593_50377{
p {font-size: 15px }  }}

Vaihda mobiilissa backgroundkuvan kohtaa mikä näkyy

@tarusalokangas

  section[data-section-id="5ffee4f51ac72d4487faf3be"]
  .section-background img {
    object-position: 90% 50% !important;
}
}

Piilota tagit

@tarusalokangas

.blog-meta-item--tags {
  display: none;
}

Piilota mobiilissa taustakuva ja korvaa värillä

@tarusalokangas

@media screen and (max-width:767px) {
/* set new background color */
  section[data-section-id="5ff4f1d393fd522c284e402d"]
  
  .section-background:after {
    background: #60786b;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/* Hide banner image */
section[data-section-id="5ff4f1d393fd522c284e402d"] .section-background img {
    visibility: hidden;
}
}

Elementin poisto mobiilissa

@tarusalokangas

@media only screen and (max-width: 640px) {
 #block-yui_3_17_2_1_1614102976981_10117{
   display: none;
 }
}

Navigaation ja footerin poisto

@tarusalokangas

Sivun settings / advanced / code injection:


<style type="text/css">
.header, footer {
    display: none;
}
</style>



TAI 

<style>.header, #footer-sections {display:none!important;}</style>

Kuvakoon muokkaaminen mobiilissa

@tarusalokangas

Kaikki saitin kuvat:

@media only screen and (max-width:640px){
.sqs-block-image {
width: 80%;
margin: 0 auto;
}
}


Yksi tietty kuva: 


@media only screen and (max-width:640px){
#block-yui_3_17_2_1_1599587567207_10495 {
width: 60% !important;
margin: 10 auto;
}
}

Pinterest kuvan poistaminen näkyvistä

@tarusalokangas

<div style="display:none">

<a href="IMAGE ADDRESS GOES HERE"><img src="IMAGE ADDRESS GOES HERE" border=0 alt="this is the alt text"/></a>

</div>

Blogin quote pystyviivan muokkaus

@tarusalokangas

.sqs-block-html blockquote, .sqs-block-markdown blockquote {
  border-left: 6px solid #D15836;
  padding: 30px 20px 30px 55px;
     width: 90% !important;
    
}

@tarusalokangas

/// blogi summaryn read more
.sqs-block-summary-v2 .summary-read-more-link  {
font-size: 0
}

.sqs-block-summary-v2 .summary-read-more-link::before  {
content: "LUE LISÄÄ";
font-size: 15px;
}

TAI

a.summary-read-more-link {
    font-size: 0 !important;
}

a.summary-read-more-link:before{
        content: "VIEW PROJECT";
        font-size: 1rem !important;
  
}

Social icons muokkaus

@tarusalokangas

Here are the main codes from this tutorial. Don't forget to change up the color to a web-safe color name, HEX color code, RGB/RGBA or HSL/HSLA color to match your own site!
//--Header Icons
.header-actions .icon--fill svg {fill:orange!important}

//--Header Icon Hover 
.header-actions .icon--fill svg:hover {fill:yellow!important; transform:scale(1.5); filter:drop-shadow(2px 2px 0px orange)}

//--Mobile Menu Icons
.header--menu-open .header-menu .icon svg {fill:purple!important}

//--On Page Icons
.sqs-use--icon {fill:purple!important;}
.sqs-use--mask {fill:pink!important;}
.sqs-svg-icon--wrapper {border-color:red!important}

Logon sijoitus bannerin päälle

@tarusalokangas

.header-title-logo img {
  margin-bottom: -140px;
  position: relative;
}

Drop down menun taustavärin vaihtaminen

@tarusalokangas

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #febf00 !important;
}

Uutiskirje block alaviivalla

@tarusalokangas

.newsletter-form-field-element {
background: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 3px #F2CBCB !important;
}

Relative positionin in mobile

@tarusalokangas

@media screen and (max-width: 640px) {
#block-c0a05d66ed68f80231d8
  ,  {
position: relative;
margin-top: 90px
}
}

Viivan pituuden muokkaus

@tarusalokangas

/* Change Line Width */

.sqs-block-horizontalrule hr {

 width: 75%;

 margin:auto;

}

Order confirmation sivun 'Order confirmed' -teksti

@tarusalokangas

/// ORDER CONFIRMATION SIVU
#confirmed-page {
  // Order Confirmed title
  h1 {
    font-size: 0px!important;
     visibility: hidden;
  }
  h1:after {
    content: "Kiitos tilauksestasi";
    font-size: 40px!important;
    visibility: visible;
  }

  // Order details text
  p {
    font-size: 20px!important;
  }
  }

Quantity -sanan vaihtaminen

@tarusalokangas

.quantity-label { visibility: hidden; } .quantity-label:before {
visibility: visible; content: "Tuan"; display: block; }

Sana 'back' mobiilinavigaatiossa

@tarusalokangas

a.header-menu-controls-control.header-menu-controls-control--active>span:nth-child(2) {
    visibility: hidden;
}
a.header-menu-controls-control.header-menu-controls-control--active>span:nth-child(2):before {
    visibility: visible;
    content: "new back";
    width: 100%;
}

Sana 'comments' vaihtaminen

@tarusalokangas

/// comments --> suomeksi
h3.comment-count span {
    visibility: hidden;
}
h3.comment-count span:before {
    visibility: visible;
    content: "Kommentit";
}

'Newest first' -sanat pois näkyvistä blogikommentti kentästä

@tarusalokangas

.squarespace-comments .header-controls .controls .comment-controls
 {
    visibility: hidden;
}

'Preview' sana pois kommenttikentästä

@tarusalokangas

.squarespace-comments .comment-btn-wrapper .btn-text {
   visibility: hidden;
}

Linkin hover

@tarusalokangas

/// linkin värin hover
p a:hover {
color:#FFB70A !important }

Piilota tuotenäkymän breadcrumb teksti

@tarusalokangas

Tämä on tuoteselainnäkymän breadcrumb teksti:


.nested-category-breadcrumb-list-item {
    display: none !important;
}


Etsi tuo ..nested-category-breadcrumb-list-item nimi inspect / tarkista työkalulla

Vaihda 'Search' -teksti

@tarusalokangas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$(".sqs-search-ui-text-input .search-input").attr('placeholder','new text');
});
</script>

Multicolumn checkboxes

@tarusalokangas

.form-wrapper .field-list .field.checkbox label {
    display: inline-block;
    width: auto;
    float: left;
    padding: 17px;
    box-sizing: border-box;
}

Kuvalle overlap sectioneiden yli

@tarusalokangas

#block-yui_3_17_2_1_1599851734937_6617 {
  margin-top: 0px;
}

Overlap tyyli summarylle

@tarusalokangas

.summary-content.sqs-gallery-meta-container {
 background-color: #fff;
 margin-top: -40px;
 padding: 20px;
 min-height: 140px;
 position: relative;
 max-width: 80%;
 margin-left: auto;
 margin-right: auto;
 letter-spacing: 0.09em;
}

Summaryblockin blogipostaukset näytetään käänteisessä järjestyksessä

@tarusalokangas

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#collection-5f3c40a075524e7a376b884b .summary-item-list').append($('.summary-item-list').find('.summary-item').get().reverse());
});
</script>

Summary blockin otsikkofontin muokkaaminen

@tarusalokangas

.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: proxima nova;
font-weight: 600;
font-size: 18px !important;
color: #33cccc;
text-transform: uppercase;
font-style: italic;
 } }


If you want to keep customizing, you can also change the excerpt font. The second part of the code will be exactly the same, but the first part will need to be changed to:

.sqs-block-summary-v2 {
.summary-excerpt p {


And same with the 'Read More' link:

.sqs-block-summary-v2 {
.summary-read-more-link {

Dropdown menun tekstin väri

@tarusalokangas

/* dropdown items color */
.header-nav-folder-item a {
    color: green !important;
}

Drop down menulle taustaväri + hover

@tarusalokangas

/// drop down menu
@linkBGColor: #899d83;
@linkTextColor: #fff;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  background: #cfd3c8 !important;
  padding: 0!important;
  .header-nav-folder-item a {
    padding: .5em 1em!important;
  }
  .header-nav-folder-item a:hover {
    background: @linkBGColor!important;
    color: @linkTextColor!important;
  }
}

Kuvan hover suurennus

@tarusalokangas

.sqs-block-image .design-layout-inline:hover img {transform:scale(1.2);
transition: 3s;}
.sqs-block-image .design-layout-inline {overflow:hidden!important}


//--Image Types
.sqs-block-image .design-layout-inline
.sqs-block-image .design-layout-poster
.sqs-block-image .design-layout-card
.sqs-block-image .design-layout-overlap
.sqs-block-image .design-layout-collage
.sqs-block-image .design-layout-stack

//--Zoom on hover
img:hover {transform: scale(1.1);}

//--Smooth zoom transition
img:hover {transform: scale(1.1); transition: .4s;}
img{transform: scale(1); transition: .4s;}

/--Zoom out on hover
img {transform: scale(1.1); transition: .4s;}
img:hover {transform: scale(1); transition: .4s;}

Piilota 'add to cart'

@tarusalokangas

.sqs-add-to-cart-button-wrapper {display:none!important}

Line blockin muokkaaminen

@tarusalokangas

/* Change Line Color: You can do this in the main style editor, but if you want a special color for an individual page, this code will get you there! :) */
.sqs-block-horizontalrule hr {
 background: #50bdb8;/*adjust the line color*/
}

/* Change Line Size */
.sqs-block-horizontalrule hr {
height: 8px!important;/*adjust the line size*/
}

/* Dotted Line */
.sqs-block-horizontalrule hr {
 background: transparent!important;
border-top: 3px dotted #50bdb8;
}

/* Dashed Line */
.sqs-block-horizontalrule hr {
 background: transparent!important;
border-top: 3px dashed #50bdb8;
}

/* Striped Line */
.sqs-block-horizontalrule hr {
 background: #df89a4;/*adjust the small stripe*/
border-top: 10px dashed #ffcfdd;/*adjust the big stripe*/
}

/* Double Line */
.sqs-block-horizontalrule hr {
 background: #df89a4 ;/*adjust the bottom line color*/
height: 5px!important;/*adjust the bottom line size*/
border-top: 5px solid #50bdb8;/*adjust the top line size and color*/
}

select-data.php

JQuery Function

Jquery Selectors

creating and appending elements

Separate scripting files

Events and Effects JQuery

Effect chaining

Vaihda password -sana Lockscreenille

Kuvakoon ja sijainnin muokkaaminen mobiilissa

Poista kuva mobiilista

Eri kuva mobiilissa yhdessä sectionissa

Muokkaa tietyn kuvan kokoa

Kuvan opasiteetti

Yksittäinen kuva ympyräksi

Automaattisen tavutuksen poisto

Fontit mobiilissa

Vaihda mobiilissa backgroundkuvan kohtaa mikä näkyy

Piilota tagit

Piilota mobiilissa taustakuva ja korvaa värillä

Elementin poisto mobiilissa

Navigaation ja footerin poisto

Kuvakoon muokkaaminen mobiilissa

Pinterest kuvan poistaminen näkyvistä

Blogin quote pystyviivan muokkaus

Read more tekstin muokkaus summary näkymässä

Social icons muokkaus

Logon sijoitus bannerin päälle

Drop down menun taustavärin vaihtaminen

Uutiskirje block alaviivalla

Relative positionin in mobile

Viivan pituuden muokkaus

Order confirmation sivun 'Order confirmed' -teksti

Quantity -sanan vaihtaminen

Sana 'back' mobiilinavigaatiossa

Sana 'comments' vaihtaminen

'Newest first' -sanat pois näkyvistä blogikommentti kentästä

'Preview' sana pois kommenttikentästä

Linkin hover

Piilota tuotenäkymän breadcrumb teksti

Vaihda 'Search' -teksti

Multicolumn checkboxes

Kuvalle overlap sectioneiden yli

Overlap tyyli summarylle

Summaryblockin blogipostaukset näytetään käänteisessä järjestyksessä

Summary blockin otsikkofontin muokkaaminen

Dropdown menun tekstin väri

Drop down menulle taustaväri + hover

Kuvan hover suurennus

Piilota 'add to cart'

Line blockin muokkaaminen

Save snippets that work with our extensions