I am using W3.CSS framework. Been using Bootstrap before but i think W3.css is more fast and want to try it out as well.
I set a dropdown button with contents but when i hover it, it does not show dropdown.
Am I missing anything out? i Have tried this on Chrome and Edge. below is the code.
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
Link 1
Link 2
Link 3
</div>
This issue is properly addressed here: Dropdowns by w3schools
You need to put the Javascript script link provided by w3schools. I have created one I am sure it will work for you. For more examples you can visit the above link.
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<p>Dropdown click Demo</p>
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Related
I would like to add some text under the "Place Order" button at WooCommerce checkout.
I'm using the woocommerce_review_order_after_submit hook:
add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );
function add_after_checkout_button() {
echo '<p>By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
Result (screenshot): https://ibb.co/F38bxDf
Could someone please help me edit this code to:
Add some space at the top (between the text and the "Place Order"
button)
Center align the text
Turn "Terms of Service" and "Privacy Policy" into clickable links
Decrease the line-height of the text
Decrease the font size
Is there a way to give this text a CSS class so I can control the styling of it with custom CSS? Or is possible to somehow type the custom CSS in the code snippet itself?
EDIT:
I've got 2 pieces of code.
Nr 1:
add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );
function add_after_checkout_button() {
echo '<p class="text-under-place-order">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
and
Nr 2:
<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>
<div class="row">
<div class="column">
<i class="fas fa-lock"></i>
SSL encrypted payment
</div>
<div class="column">
<i class="fas fa-undo"></i>
100% money-back guarantee
</div>
</div>
Code snippet Nr 1 solves my initial question.
Code snippet Nr 2 is an addition to display "encrypted payment" and "money-back guarantee" above the text as per my request in the comments.
I don't know how to merge these 2 pieces of code into 1.
You could add a class like this:
function add_after_checkout_button() {
echo '<p class="yourClassName">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
Or use css inline like this:
function add_after_checkout_button() {
echo '<p style="padding-top: 10px;">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
To turn the text into links just use a Terms and Service tag inside, just like you already did with the <p>.
EDIT:
HTML and CSS code to add an "encrypted payment" and "money-back guarantee" as requested in the comments:
<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>
<div class="row">
<div class="column">
<i class="fas fa-lock"></i>
SSL encrypted payment
</div>
<div class="column">
<i class="fas fa-undo"></i>
100% money-back guarantee
</div>
</div>
.row {
display: flex;
text-align: center;
}
.column {
flex: 50%;
}
You should just add a class to your tag <p></p> and style it in your style.css file in your child theme.
For the links, just add tags around the words "Terms of Service" and "Privacy Policy"
I'm new to aurelia. I'm looking to find the best method for adding classes on click events.
I simply want to click approve or request information, and then add a class to the corresponding "contact card". This class would change the background color.
I know it's probably simple, but I thought I'd look here for the best method.
Here's an image to what I've got:
Apologies for the wait, work has been a bit busy.
This is my first time posting on S.O., so I apologize for any expectations I'm not meeting.
<div class="col-sm-4">
<button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
approve contact
</button>
</div>
<div class="col-sm-4">
<button class="btn btn col-sm-12" click.delegate="requestContact()">
request information
</button>
</div>
</div>
the element to be changed is named "list-group-item", containing the
contact's details(code shown above).
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4>${contact.firstName} ${contact.lastName}</h4>
<p>${contact.company}</p>
<p>${contact.email}</p>
<h6>${contact.approval}</h6>
</a>
<a route-href="route: contacts; params.bind: {id:contact.id}">
<p>${contact.phoneNumber}</p>
</a>
</li>
</ul>
</div>
goodBoi() {
let result = confirm("Are you sure you want to confirm this contact?");
if (result === true) {
var standingShell = document.getElementsByClassName("list-group-item");
//im hoping here I would add a class to the new variable//
this.contact.approval = 'approved';
this.save();
}
}
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
requestContact() {
let contactRequestText = "request sent to contact";
this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
this.ea.publish(new ContactUpdated(this.contact));
}
There are many ways to set a CSS-class using Aurelia. Following I prepared an example gist:
Template:
<template>
<h1>${message}</h1>
<div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">
</div>
<div class="form-group">
<button click.delegate="save()">
Click me
</button>
</div>
</template>
And the code class:
#autoinject
export class App {
#bindable clicked = false;
save(){
this.clicked = true;
}
}
https://gist.run/?id=425993b04a977466fa685758389aa2b4
But there are other, cleaner ways:
using ref in a custom element.
custom attributes.
Include jQuery for using e.g. $('#myelement').addClass()
In Fancybox 3, is it possible to have HTML inside an image gallery?
This HTML will have a link to an external site.
Whatever I do, it doesn't work.
<div id="photo-gallery" style="display: none">
<a data-fancybox="photo-gallery" href="photo-1.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-2.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-3.jpg"></a>
The 4th item should be just a window with a link to another site, like:
<a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a>
</div>
Please, check documentation for samples - http://fancyapps.com/fancybox/3/docs/
I guess you are looking for something like this:
<a data-fancybox="photo-gallery" data-type="iframe" href="some-page.html">4</a>
Demo - https://codepen.io/anon/pen/vdxPJg?editors=1000
Edit #1
If you want to automatically add some extra content at the end of the gallery, you can use this snippet:
$('[data-fancybox="photo-gallery"]').fancybox({
onInit: function(instance) {
instance.createGroup({
type : 'html',
content : '<div><h1>Hi</h1><a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a></div>'
});
}
})
Demo - https://codepen.io/anon/pen/KQmNGX?editors=1010
Edit #2
This is how you can mix images and inline content:
<a data-fancybox="photo-gallery" href="#info">4</a>
<div id="info">
Click here
</div>
Demo - https://codepen.io/anon/pen/KQmNrX?editors=1010
I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?
Current template code:
<link rel="stylesheet" href="#App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="#App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="#App.Path/dist/app/view.css" data-enableoptimizations="true" />
#if(#Dnn.User.IsSuperUser)
{
#Content.Toolbar
} else {
#Edit.Toolbar(Content, actions: "edit,add")
}
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
#* this is the rotator element *#
<div id='blueimp-gallery-#Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
<div class='slides'></div>
<h3 class='title'></h3>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type="text/javascript">
$(document).ready(function () {
// initialize the carousel gallery
blueimp.Gallery($('[data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID"]').get(), {
container: '#blueimp-gallery-#Dnn.Module.ModuleID',
carousel: true
}
);
});
</script>
Also note that when I click on meta data tag, the following error message pop up appears:
Note: Version: 9.2.0
UPDATE:
Changing "Image Metadata" to "ImageMetadata" worked thx.
Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't?
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" alt="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
So you're asking a few things at the same time.
number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :
#(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)
number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"
I was originally having problems with the below JS smooth scroll as it made any real links rather then #location stop working.
$('.navbar-nav > li').click(function(event) {
event.preventDefault();
var target = $(this).find('>a').prop('hash');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
});
So I changed it to
$(document).ready(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 1200);
return false;
}
}
});
});
Which sorted the original problem of being unable to add a working "blog" link in the navbar however it has now rendered the left and right (next and prev) carousel buttons not working.
I would be grateful if someone can help me out with this as it is driving me crazy.
The html for the carousel is as follows
<section id="main-slider" class="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-content">
<h1>Responsive Website Design</h1>
<p class="lead">With 20% of all website traffic in the UK coming from tablets and smart phones then never before has it been a better time to have a responsive website.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Free Consultation</h1>
<p class="lead">I understand every business has different needs so we can discuss what it is your want to achieve and using my expert advice make it a reality.</p>
</div>
</div>
</div><!--/.item-->
<div class="item">
<div class="container">
<div class="carousel-content">
<h1>Built to be SEO/Google Friendly</h1>
<p class="lead">Having a website built is the first step but next you need to put it in front of your target audience. On site SEO is where it all begins.</p>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
<a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
<a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
</section><!--/#main-slider-->
First of all, the answers above are correct. I just wanted to spell it out a little clearer for anyone needing help.
The code that needs to be updated is the SmoothScroll function itself. You will need to know the ID of the carousel from your bootstrap page. Just add the carousel ID to the not().click function and it will work like a charm. Here is an example of what I did. The change was made on the third line of code, where you see the carousel ID#.
<script>
$(function() {
$('a[href*=#]:not([href=#carousel-299058])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 70
}, 500);
return false;
}
}
});
});
</script>
Try replacing this:
$('a[href*=#]:not([href=#])').click(function() {
with:
$('a[href*=#]:not([href=#media])').click(function () {
Happy coding!
I was using the smooth scrolling javascript everyone uses and having the same issue, like all obedient little developers out there I was using #myCarousel:
<a class="right carousel-control" href="#myCarousel" data-slide="next">
and as soon as I changed [href=media] to [href=myCarousel] my Bootstrap carousel controls started working again.
I had this issue recently and my solution was to use a class on each link as opposed to the href attribute selectors within the jQuery function.
This does mean a little extra HTML mark-up but I felt it was more robust and causes less interference with additional scripts that may be added within your project.
So this:
$('a[href*=#]:not([href=#])').click(function() {
Becomes this:
$('.your-class-name').click(function() {
And any smooth scrolling links you add to your page will become:
Link
And scroll to:
<div id="section">... Content ...</div>
Dont forget to add : \\. It is necessary to add it since the latest version of JQUERY.
$('a[href*=\\#]:not([href=\\#carousel-299058])').click(function() {