I'm working on a button test that needs to be completed in jQuery only. The site is fairly confusing, but I think I have simplified the issue below. I am trying to apply some styles to these buttons however the class is used all over and some specific instances need to be excluded.
<body>
<div>
<a class="button primary" href="...">change me</a>
</div>
<div class="ancestorClass">
<h2>
<a class="button primary" href="...">don't touch</a>
</h2>
</div>
</body>
Currently I have the following...
jQuery("<style type='text/css'>
.change-button:before
{font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #01a982;
}
.change-button-gray:before
{
font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #707070;
}
</style>").appendTo("head");
jQuery(".button.primary").addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
});
In previous variations of tests on this site I was able to use the
following to prevent specific buttons from being affected, but because
of how the css is being added in on this variation it no longer works
for me.
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
Here is the code I was using that got the error:
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass(".ancestorClass");
.addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
})});
there's many ways to solve your problem but I will choose your idea instead of coming with a new one. Instead of using this code :
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
I suggest you to use this :
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass("ancestorClass");
});
Here's a fiddle showing how it works.
An other solution would be to use the css selector :nth-child(number) but it's less beautiful and you have to change the selector when you add or delete elements that precede the target (with the same class).
Related
I'm trying to add an image in a span with data-pic, but now I want to try a picture carousel, how can I use JavaScript to index data-pic to achieve the effect?
I follow this instruction:
W3C
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".product-price").css("color", $(this).attr("data-color"));
$(".product-button").css("color", $(this).attr("data-color"));
$(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.blue {
background: #7ed6df;
}
.green {
background: #badc58;
}
.yellow {
background: #f9ca24;
}
.rose {
background: #ff7979;
}
.product-colors .active:after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
<div class="product-card">
<h1>A new model of free group travel</h1>
<p>Travel destination</p>
<div class="product-pic"></div>
<div class="product-colors" id="Banner">
<span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
<span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
<span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
<span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
</div>
<div class="product-info">
<div class="product-price">$90</div>
Add to Cart
</div>
</div>
</body>
I am learning the basics of JavaScript, I don’t know how to implement this feature.
Hope you can help me
Thanks for your help :)
you can't use background and background-image together, one will overwrite the other,
By the way ,what are you trying to create? a carousel or what?
well, I guess this is what you're trying to do,
in order to achieve this, you need to declare the $('body') twice, add background-color to the first, then background-image to the second or (vice-versa),
below is the final code
var span = $('.product-colors span');
span.on('click', function() {
span.removeClass('active');
$(this).addClass('active');
$('body').css("background-color", $(this).attr('data-color'));
$('body').css('background-image', $(this).attr('data-pic'));
});
then go the css, I added background-blend property to it, so as to blend the background-color and background-image together, I also set the span to display: inline-block
check out this codepen link to see all the changes made here
So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).
The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)
Is there any way to make CKEDITOR display the source mode option as two tabs (HTML / SOURCE views) instead of a single Source button?
No. But with a little help of CKEditor API, it's a piece of cake (JSFiddle).
HTML. Tabs are based on "radio+label" technique, which is pretty common and described in this article. Note that there's no need to create real tabs since the editor itself will change its contents. I did it to reduce JS – you can still control your tabs with JS if you want.
<div class="tabs">
<input type="radio" id="tab-wysiwyg" name="mode" checked>
<label for="tab-wysiwyg">WYSIWYG</label>
<input type="radio" id="tab-source" name="mode">
<label for="tab-source">Source</label>
<textarea id="editor">Hello!</textarea>
</div>
JS. Note that listeners can also be applied with jQuery or any other DOM library you use. I used CKEditor DOM API to keep it simple. The only thing which is worth mentioning is editor.setMode. You can also attach listeners externally: CKEDITOR.replace returns editor instance, which is also stored in global CKEDITOR.instances object.
CKEDITOR.replace( 'editor', {
toolbarGroups: [ { name: 'basicstyles' } ],
on: {
instanceReady: function() {
var doc = CKEDITOR.document,
editor = this;
doc.getById( 'tab-wysiwyg' ).on( 'click', function() {
editor.setMode( 'wysiwyg' );
} );
doc.getById( 'tab-source' ).on( 'click', function() {
editor.setMode( 'source' );
} );
}
}
} );
CSS (for tabs). Styling, eyecandy....
.tabs [type=radio] {
display: none;
position: absolute;
}
.tabs [type=radio] + label {
font-size: 12px;
display: block;
float: left;
border: 1px solid #bbb;
cursor: pointer;
padding: .5em 1em;
color: #888;
position: relative;
margin-right: -1px;
margin-bottom: -1px;
opacity: .8;
font-weight: bold;
}
.tabs label:hover {
background: #f7f7f7;
}
.tabs [type=radio]:checked + label {
background: rgb(244,244,244);
opacity: 1;
color: #000;
}
.tabs .cke_editor_editor {
clear: both;
}
Extra: You can also use config.toolbarCanCollapse option and editor.execCommand( 'toolbarCollapse' ); to minimize the toolbar in source mode. Have fun!
I am pulling my hair out currently, because Cufon is either playing up, or I'm thinking too complicated. I have a span link class, which includes text inside it. The colour of the font inside the a span should change on hover state.
Cufon.replace('.info-grid a span', { fontFamily: 'Vegur', hover: true, color: 'white', hoverables: { a: true, span: true } });
With the above code, when you open the site, the font is white. I assume it's because the above code doesn't actually set the hover state, but how can I set it? I tried setting .info-grid a:hover span class but it didn't work.
CSS...
.info-grid a span {
position: relative;
left: 10px;
top: 80px;
font-size: 0.94em;
line-height: 1.3em;
font-weight: bold;
text-transform: uppercase;
color: #009FD4;
background-color: #ffffff;
}
.info-grid a:hover span {
color: #fff;
background-color: #009FD4;
}
HTML
<div class="info-panel" id="info-firstteam">
<h3>First Team</h3>
<div class="info-grid">
<div>
<a href="../players/profiles/1.html" class="pic-no1">
<p id="nametext"><span id="firstline">James</span><br><span id="secondline">Tillotson</span></p>
</a>
</div>
<div>
...additional divs for players
</div>
</div>
You probably wanted to setup color as part of :hover styling, right? In that case you should put this rule inside hover property, like this:
Cufon.replace('.info-grid a span', {
fontFamily: 'Vegur',
hover: {
color: 'white'
},
hoverables: { a: true, span: true }
});
It's said in the documentation, however...
Nesting :hover-enabled elements is unrecommended and may lead to unpredictable results.
... and the way I see it, this notice should be accounted in your case. So maybe it's best to depend on :hover state of a only for changing the colors, replacing the code with this:
Cufon.replace('.info-grid a', {
fontFamily: 'Vegur',
hover: {
color: 'white'
}
});
... as <a> elements are 'hoverable' by default.
I've set up a simple jQuery UI ProgressBar:
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").
I can't seem to get this to work.
Bonus Question: How do I format the displayed text (e.g. color, alignment)?
Instead of introducing another element (span) and a new style, leverage what is already there like this:
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).
If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:
.ui-progressbar-value {
font-size: 13px;
font-weight: normal;
line-height: 18px;
padding-left: 10px;
}
The way I did it was:
<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>
You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page
Hope this help
After fiddling around with some solutions, based on the answers here, I've ended up with this one:
Html:
<div id="progress"><span class="caption">Loading...please wait</span></div>
JS:
$("#progress").children('span.caption').html(percentage + '%');
(To be called inside the function that updates the progressbar value)
CSS:
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
Advantages:
Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS
This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.
Html:
<div class="progress"><span>70%</span></div>
Script:
$(".progress").each(function() {
$(this).progressbar({
value: 70
}).children("span").appendTo(this);
});
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}
Working sample: http://jsfiddle.net/hasYK/
I used this:
<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>
<style>
#progress {
height: 18px;
}
#progress .ui-progressbar {
position: relative;
}
#progress .ui-progressbar-value {
margin-top: -20px;
}
#progress span.caption {
display: block;
position: static;
text-align: center;
}
</style>
</head>
<body>
test
<div id="progressbar"></div>
<br>
test2
<div id="progressbar2"></div>
<script>
$("#progressbar").progressbar({
max : 1024,
value : 10
});
$("#progressbar2").progressbar({
value : 50
});
$(document).ready(function() {
$("#progressbar ").children('div.ui-progressbar-value').html('10');
$("#progressbar2 ").children('div.ui-progressbar-value').html('50%');
});
</script>
</body>