This is my code
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function skinchange(link){
document.getElementById('inputtest').value = link;
}
</script>
<script type="text/javascript">
$(function() {
$('.imgstyles').click(function() {
$('.imgstyles').removeClass('selected');
$(this).addClass('selected')
});
});
</script>
.selected {
border: 10px solid #7EBEFC;
}
a:hover img.imgstyles {
border: 3px solid #7EBEFC;
opacity:0.15;
}
a:hover div.textcss {
display: block;
}
a img.imgstyles {
border: 2px solid #ffffff;
}
.textcss {
display: none;
margin-top: -147px;
font-size: 50px;
font-weight: bold;
margin-right: 20px;
color: #7EBEFC;
text-align: center;
}
<input type="text" name="inputtest" id="inputtest"/>
<a onclick="skinchange('https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/gred.xml')"><img class="imgstyles" src="https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/images/gred.jpg" width="95%" height="60%"><div class="textcss">Gred</div></a>
Function set value work, hover work but my selected css didn't, someone help me!
The problem is the css specificity.
The border rule set by .selected is overwritten by the more specific rule a img.selected.
So the solution is to create a more specific rule like img.imgstyles.selected
function skinchange(link) {
document.getElementById('inputtest').value = link;
}
$(function() {
$('.imgstyles').click(function() {
$('.imgstyles').removeClass('selected');
$(this).addClass('selected')
});
});
.selected, img.imgstyles.selected {
border: 10px solid #7EBEFC;
}
a:hover img.imgstyles {
border: 3px solid #7EBEFC;
opacity: 0.15;
}
a:hover div.textcss {
display: block;
}
a img.imgstyles {
border: 2px solid #ffffff;
}
.textcss {
display: none;
margin-top: -147px;
font-size: 50px;
font-weight: bold;
margin-right: 20px;
color: #7EBEFC;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<input type="text" name="inputtest" id="inputtest" />
<a onclick="skinchange('https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/gred.xml')">
<img class="imgstyles" src="https://wp-test-hoangxanh.c9.io/wp-content/plugins/hEmbed/skins/images/gred.jpg" width="95%" height="60%">
<div class="textcss">Gred</div>
</a>
Related
In my below jQuery I have an element that reflects the written input within a secondary element. At the same time the element with the reflected text needs to resize, this is working, but there are 2 problems I cannot resolve:
1. When holding a backspace down, it doesn't keep up.
2. When you press single backspace, it skips a character and field cannot be emptied.
Please see below snippet:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').bind('keypress keyup blur', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
The problem is that the .bind('keypress keyup blur', function() { is not cooping well with updating the values. When the key is down it needs an update and is waiting for up, it then skips, and vice versa.
So the solution here is to use .on('input', function() { instead.
See below outcome:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').on('input', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>
I have a sample code with three links.
<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
text-decoration: none;
color: black;
}
.sortLabel {
text-decoration: none;
color: black;
margin-right: 15px;
}
.sortType {
margin-right: 15px;
}
.sortType:hover{
border-bottom: 1px solid violet;
}
a.sortType:active {
border-bottom: 1px solid violet;
}
a.sortType:target {
border-bottom: 1px solid violet;
}
</style>
</head>
<body>
<div >
Sort By:
Date
Place
Name
</div>
</body>
</html>
I could show the border-bottom line on hover of the option. Now I am trying to maintain the border-bottom line on the selected option. On clicking an option, say 'Date' it should have the bottom-line until I click on other option.
I tried doing it. But couldn't succeed. Please help. Thanks in advance.
If your anchor tags aren't necessary, you could use radio button inputs and labels together with the :checked pseudo selector and the adjacent sibling combinator in order to achieve what you're looking for.
<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
text-decoration: none;
color: black;
}
.sortLabel {
text-decoration: none;
color: black;
margin-right: 15px;
}
.sortType {
margin-right: 15px;
}
.sortType:hover{
border-bottom: 1px solid violet;
}
a.sortType:active {
border-bottom: 1px solid violet;
}
a.sortType:target {
border-bottom: 1px solid violet;
}
input[type="radio"]{
display: none;
}
input[type="radio"]:checked + .sortType{
border-bottom: 1px solid violet;
}
</style>
</head>
<body>
<div >
Sort By:
<input id="date" name="sort" value="date" type="radio">
<label for="date" class="sortType">Date</label>
<input id="place" name="sort" value="date" type="radio">
<label for="place" class="sortType">Place</label>
<input id="name" name="sort" value="date" type="radio">
<label for="name" class="sortType">Name</label>
</div>
</body>
</html>
The key CSS that I've added is
input[type="radio"]:checked + .sortType{
border-bottom: 1px solid violet;
}
Which styles any .sortType element that immediately follows a checked radio input.
Add :focus
<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
text-decoration: none;
color: black;
}
.sortLabel {
text-decoration: none;
color: black;
margin-right: 15px;
}
.sortType {
margin-right: 15px;
}
.sortType:hover{
border-bottom: 1px solid violet;
}
a.sortType:active, a.sortType:focus {
border-bottom: 1px solid violet;
}
a.sortType:target {
border-bottom: 1px solid violet;
}
</style>
</head>
<body>
<div >
Sort By:
Date
Place
Name
</div>
</body>
</html>
//code for styling the active element
var $links = $('a').click(function () {
$('a').removeClass('clicked');
$(this).addClass('clicked');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
a.sortType {
text-decoration: none;
color: black;
}
.sortLabel {
text-decoration: none;
color: black;
margin-right: 15px;
}
.sortType {
margin-right: 15px;
}
.sortType:hover{
border-bottom: 1px solid violet;
}
a.sortType:active {
border-bottom: 1px solid violet;
}
a.sortType:target {
border-bottom: 1px solid violet;
}
.clicked {
border-bottom: 1px solid violet;
}
</style>
</head>
<body>
<div >
Sort By:
Date
Place
Name
</div>
</body>
</html>
There are so many approach of doing this, we can use simple jQuery click function to add or remove active class on anchor tag click and style the active class, Hope this solution helps to solve your problem.
Note: We can add one common class to the anchor tag and target the specific class, in future if there are so many anchor tags, then need to target the anchor tag based on its parent class or specific class.
You just need to add basic javascript script for addClass when the user clicks on a. I just add active class. Try this I hope it'll help you out. Thanks
document.addEventListener('click', function (e) {
var all = document.querySelectorAll('.sortType')
if (e.target.matches('.sortType')) {
e.preventDefault();
for (var i = 0; i < all.length; i++) {
all[i].classList.remove('active')
}
e.target.classList.add("active");
}
}, false);
.reqborder
{
border-bottom:1px solid violet
}
a.sortType {
text-decoration: none;
color: black;
}
.sortLabel {
text-decoration: none;
color: black;
margin-right: 15px;
}
.sortType {
margin-right: 15px;
}
.sortType:hover{
border-bottom: 1px solid violet;
}
a.sortType.active {
border-bottom: 1px solid violet;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div >
Sort By:
Date
Place
Name
</div>
</body>
</html>
You can keep the anchor tags in li and than apply your styles on the li-items.
A simple navigation menu example from w3schools that you can follow:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
If click on button some boxes are append. next you will click on that boxes gradient box will append but gradient boxes are not appending.its append only first box if click on another box gradient box doesn't append
My Fiddle
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
<div class="appenddiv">
</div>
<script>
$(document).ready(function(){
var i = 0;
$(".clbtn").click(function(el){
$.fn.myFunction = function(){
gradX("#clrpik", {
targets: [".target"]
});
}
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');
$(".target").click(function(){
$(".appenddiv").append('<div id="clrpik"></div>').myFunction();
});
});
});
</script>
Gradient box appending on other div click but it's stick to first div
use this to set:
$(this).append('<div id="clrpik"></div>').myFunction();
});
$(document).ready(function(){
var f = 0;
$(".clbtn").click(function(el){
$.fn.myFunction = function(){
gradX("#clrpik", {
targets: [".target"]
});
//f++;
}
$(".appenddiv").append('<div class="target"><div class="target_text">Click Here for gradient</div></div>');
$(".target").one('click', function(){
$(this).append('<div id="clrpik"></div>').myFunction();
});
});
});
.targets {
margin:0 auto;
text-align: center;
border: 1px solid #ccc;
background: #f8f8f8;
margin: 0 auto;
border-radius: 4px;
width:auto;
padding:10px;
}
.target_text {
margin: 0px auto;
margin-top: 40%;
background: #f8f8f8;
width: 70px;
border: 1px solid #ddd;
padding: 2px;
border-radius: 2px;
color: #111;
}
.target {
border: 1px solid;
margin: 0px 10%;
width: 150px;
height: 150px;
display:inline-block;
}
#target {
border-radius: 150px;
}
.result {
text-align: center;
text-transform: uppercase;
font-weight: bold;
padding:12px;
padding-left: 15px;
margin: 10px 0px;
border: 1px solid #ddd;
background: #f8f8f8;
}
.clrpik {
height: 200px;
margin: 100px 34%;
}
<link href="https://cdn.office24by7.com/add-templates/colorpicker.css" rel="stylesheet"/>
<link href="https://cdn.office24by7.com/add-templates/gradX.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/dom-drag.js"></script>
<script src="https://codologic.com/page/sites/all/files/gradx/colorpicker/js/colorpicker.js"></script>
<script src="https://cdn.office24by7.com/add-templates/gradX.js"></script>
<button class="clbtn" name="button" value="button">button</button>
<div class="appenddiv">
</div>
So I needed a script that add some extra text at the end of the URL when it is clicked, if it's under 'fragment' class. The problem is it works perfectly fine on the desktop, but it's not working on mobile.
When the banner is clicked, it should lead to http://www.google.com/extratext.
It works fine on desktop but when I click this banner on my mobile, it leads to the original link i.e. http://www.google.com
Here's the code:
<script type="text/javascript">
NodeList.prototype.addEventListener = function(type, handler) {
for(var node of this)
node.addEventListener(type, handler);
}
HTMLCollection.prototype.addEventListener = function(type, handler) {
for(var node of this)
node.addEventListener(type, handler);
}
var hasExecuted = false;
var links = document.getElementsByClassName("fragment");
links.addEventListener("click", function () {
if(hasExecuted) return;
for(var link of links)
link.href += "extratext";
hasExecuted = true;
});
</script>
.fragment {
font-size: 12px;
border-bottom: 1px solid #e8e8e8;
height: 100%;
padding: 18px 10px 10px 10px;
text-decoration: none;
display: block;
box-sizing: border-box;
}
.fragment:focus, .fragment:hover, .fragment:visited {
background-color: #f7f7f7;
text-decoration: none;
}
.fragment img {
float: left;
margin-right: 10px;
}
.styleraise {
color: black;
font-size: 18px;
display: inline;
}
.styleraise1 {
float: right;
font-weight: bold;
background-color: #2bde73;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color: white;
font-size:14px;
padding :1px 6px 1px 6px;
}
.textpara {
color:grey;
line-height: 150%;
padding-top: 5px;
}
.imgbor {
border: 1px solid #e8e8e8;
Height: 50px;
width: 50px;
}
<a class="fragment" href="http://www.google.com/" target="_blank">
<div>
<img class="imgbor" src ="https://image.winudf.com/1775/0248f14fdedd6064/icon=150x.png" alt="some description"/>
<span class="styleraise">MagicCamera</span><span class="styleraise1">It's free</span>
<div class="textpara">
MagicCamera can take photos of different style, with a flashlight function.</div>
</div>
</a>
How to use animation while appending new element using jQuery? I went through couple of answers here but the same method does not work for me. I used show('show') and fadeIn('slow') but it does not seem that animates the new element.
$(document).ready(function() {
$('#add-item').click(add);
function add() {
var newItem = $('#new-item-text');
var span = $('<span>', {
class: 'remove',
click: remove
});
var li = $('<li>', {
class: 'todo-item',
text: newItem.val(),
append: span,
click: completed
});
if (newItem.val()) {
$('ul.todo-list').append(li, $('li.todo-new')).fadeIn('slow');
newItem.val('');
}
}
});
.todo-list {
list-style: none;
padding: 0px;
}
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
}
.todo-new {
display: block;
margin-top: 10px;
}
.todo-new input[type='text'] {
width: 260px;
height: 22px;
border: 2px solid #444;
}
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
}
.todo-new a:hover {
background-color: #0EB0dd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span>
</li>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span>
</li>
<li class='todo-new'>
<input id='new-item-text' type='text' />
<a id='add-item' href='#'>+</a>
</li>
</ul>
To animate, you should start by hiding the elements, for instance by setting:
display: none;
Then fadeIn() will animate and set display: block;