Get me outta here!

Saturday, November 3, 2018

How to Read More/Less More On Contents Using JavaScript

Posted by Unknown on November 03, 2018 with No comments
<html>
  <head>
    <title>jQuery Read More/Less Toggle Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <style type="text/css">
    .morecontent span {
    display: none;
}
.morelink {
    display: block;
}
  </style>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";
   

    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
    </script>
  </body>
</html>

Wednesday, October 24, 2018

ইনপুট ভালু নিয়ে পরে কালার পরিবর্তন কিভাবে করা যায় ?

Posted by Unknown on October 24, 2018 with No comments
<!DOCTYPE html>
<html>
<head>
<title>New text</title>


<style>
#username{
text-transform: uppercase;
}
</style>
</head>
<body>

 <input type="text" name="unsername"  id="unsername" placeholder="enter name...">

 <input type="submit" name="submit" onclick="submit()" value="Submit">

 <div id="show"></div>


<script>
function submit(){
var username = document.getElementById('unsername').value;
document.getElementById('show').innerHTML = "Name : " + "<span style='color:red; font-size: 30px; text-transform: uppercase;'>" + username + "</span>";
}
</script>
</body>
</html>

Sunday, March 25, 2018

Reset ID autoincrement ? phpmyadmin [duplicate]

Posted by Unknown on March 25, 2018 with No comments
  • Click on a database name in the left column.
  • Click on a table name in the left column.
  • Click the "Operations" tab at the top.
  • Under "Table options" there should be a field for AUTO_INCREMENT (only on tables that have an auto-increment field).
  • Input desired value and click the "Go" button below.

Wednesday, March 14, 2018

How to reset primary key for a table

Posted by Unknown on March 14, 2018 with No comments
set @autoid:=0;
update tablename set id = @autoid:=(@autoid+1);
alter table tablename auto_increment = 1;



//Reset row of database auto_increment 
ALTER TABLE tablename AUTO_INCREMENT = 1

Sunday, March 11, 2018

Calling external api using View Js

Posted by Unknown on March 11, 2018 with No comments
<!DOCTYPE html>
<html>
<head>
    <title>Vue Js</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">


</head>
<style>
.menu ul{
 background-color: #333;
 width: 800px;
 margin: 0;
 padding: 0;

}
.menu ul li{
 float: left;
 width: 100px;   
}
.menu ul li a{
  text-decoration: none;
  display: block;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 50px;
}
.menu ul li a:hover{
    color: red;
    background-color: #000;
    border-radius: 2px;
}
.homeBody{
    width: 800px;
    padding: 30px;
    background-color: yellow;
}
.aboutBody{
    width: 800px;
    padding: 30px;
    background-color: green;
}
.contactBody{
    width: 800px;
    padding: 30px;
    background-color: pink;
}
.content h1{

}
.content p{
 text-align: justify;
}
</style>
<body>
   
        <div id="root">
            <button @click="getPost()">Add Api</button>
            <div class="" v-for="post in posts">
                <h1>{{ post.title }}</h1>
                <p>{{ post.body }}</p>
            </div>
        </div>


    <!--js plugin-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
     var app = new Vue({
         el:"#root",
         data:{
             posts:[]
         },
         methods:{
             getPost:function(){
                 var current = this;
                 axios.get("http://jsonplaceholder.typicode.com/posts")
                 .then(function(res){
                     current.posts = res.data;
                 });
             }
         }
     });
    </script>
</body>
</html>

Saturday, March 10, 2018

load only body content using Vue js

Posted by Unknown on March 10, 2018 with No comments
<!DOCTYPE html>
<html>
<head>
    <title>Vue Js</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">


</head>
<style>
.menu ul{
 background-color: #333;
 width: 800px;
 margin: 0;
 padding: 0;

}
.menu ul li{
 float: left;
 width: 100px;   
}
.menu ul li a{
  text-decoration: none;
  display: block;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 50px;
}
.menu ul li a:hover{
    color: red;
    background-color: #000;
    border-radius: 2px;
}
.homeBody{
    width: 800px;
    padding: 30px;
    background-color: yellow;
}
.aboutBody{
    width: 800px;
    padding: 30px;
    background-color: green;
}
.contactBody{
    width: 800px;
    padding: 30px;
    background-color: pink;
}
.content h1{

}
.content p{
 text-align: justify;
}
</style>
<body>
    <center>
        <div id="root">
            <h1>View Js Tutorial</h1>
            <div class="menu">
                <ul class="nav">
                    <li><router-link to="home">Home</router-link></a></li>
                    <li><router-link to="about">About</router-link></a></li>
                    <li><router-link to="contact">Contact</router-link></a></li>
                </ul>
               
            </div>
            <br />
        <router-view></router-view>
</div>
</center>

    <!--js plugin-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
       
        var Home={
            template:`
            <div class="homeBody">
                <div class="content">
                    <h1>Home</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
        `
        };
        var About={
            template:`
            <div class="aboutBody">
                <div class="content">
                    <h1>About</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
        `
        };
        var Contact={
            template:`
            <div class="contactBody">
                <div class="content">
                    <h1>Contact</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
        `
        };
        var routes=[
            {path:'/home', component:Home},
            {path:'/about', component:About},
            {path:'/contact', component:Contact},
        ];

        var router = new VueRouter({
            routes:routes,
            mode:'history',
            base:'/viewJS'
        });


        var app = new Vue({
            router:router
        }).$mount("#root");
    </script>
</body>
</html>

Friday, March 9, 2018

Click close button remove div section using Vue js

Posted by Unknown on March 09, 2018 with No comments
<!DOCTYPE html>
<html>
<head>
    <title>Vue Js</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<style type="text/css">
.panel{
    height: 100%;
    width: 600px;
    padding-top: 50px;
}
.panel-title{
    background-color: gray;
    width: 100%;
    overflow: hidden;
}
.panel-title h2{
    float: left;
    margin-left: 10px;
}
.close{
    float: right;
    margin-right: 10px;
}
.panel-content{
    text-align: justify;
    padding-top: 20px;
}
</style>
<body>
    <center>
        <div id="root">
            <panel title="This is test">
                <h1>Enter Username:- </h1>
                <input type="text" name="" placeholder="Enter name...">
                <input type="button" name="" value="submit">
            </panel>
        </div>
    </center>


    <!--js plugin-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
        Vue.component("panel", {
            template:` <div class="panel" v-if="show">
            <div class="panel-title">
            <h2>{{ title }}</h2>
            <button class="close" @click="show=false">x</button>
            </div>
            <div class="panel-content">
            <slot></slot>
            </div>
            </div> `,
            props:["title","content"],
            data:function(){
                return{
                    show:true
                }
            }
        });
        var app = new Vue({
            el:"#root",
            data:{

            }

        });
    </script>
</body>
</html>
Subscribe to: Posts (Atom)