I'm attempting to use a fancy JSslider, with a project I'm working on for school and I can't seem to understand why I can't get it working. It should be simple...
<link href='http://fonts.googleapis.com/css?family=Merienda One' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<div id="wTurkey">
<h1> The Wild Turkey</h1>
<div class="coin-slider">
<a href="" target="_blank">
<img src='images/cotside.jpg'>
<span>
<p>The Wild Turkey</p>
Some text here
</span>
</a>
At the very end of my body tag I have the following
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({hoverPause: false });
});
</script>
</body>
Here's the original site. http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ I'm just basicly looking for a second set of eyes to tell me what's wrong.
The problem is with your jQuery selector:
$('#coin-slider')
should be
$('.coin-slider')
The 'dot' denotes a css class rather than an ID (which is denoted by the # symbol)
Related
How to disable click on .lg-img-wrap?
I have tried lot of solutions but none seems to work on lightgallery.
Tried 1
$(".lg-img-wrap").children().unbind('click');
Tried 2
$(".noclick").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
Tried 3
pointer-events:none //to a css property
I would like to prevent closing of light gallery when user clicks outside the image.
Black margin is visible when image ratio is not same as that of screen size.
Please check image below for reference.
Light Gallery I am using: https://github.com/sachinchoolur/lightGallery
Add closeable: false to your lightGallery initialization. Here's their API describing that feature.
Working Codepen
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css" integrity="sha512-I/g40Mx7U2Oepd3iHIpQRqdQGJ3vgdw0ix8LxGxX9zKv1MDizjD6dRcJ3PC1qpyfkj4rikVNcpBKcnmuJWUaTQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
</head>
<div id="lightgallery">
<a href="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150" />
</a>
</div>
<script type="text/javascript">
$('#lightgallery').lightGallery({
closable: false
});
</script>
</html>
$(".lg-img-wrap").off("click");
or
$(".lg-img-wrap").prop("disabled",true);
or
$('.lg-img-wrap"').click(false);
I hope it works for you. good work.
I need to pull the sku (CS060120) from this section of html (edit:) Using VBA
tried getAttribute and getElementsbyTag(and Class)Name but I am not able to get the return I am looking for. Anyone know how to do this?
<section class="product_options">
<header>
<h1>
60' x 120' NiceRink CS Liner
</h1>
</header>
<vue-product-options
v-bind:product-opts="[]"
v-bind:configurable-payload="{"product_option":{"extension_attributes":{"configurable_item_options":[]}}}"
v-bind:liner-types="{"good":16,"better":14,"best":15}"
v-bind:is-folded-or-rolled-liner-sku="false"
v-bind:bundle-payload="{"product_option":{"extension_attributes":{"bundle_options":[]}}}"
v-bind:tier-prices="[]"
v-bind:is-wholesale-only="false"
v-bind:prices-index="{}"
v-bind:options-map="{}"
v-bind:is-configurable="false"
v-bind:is-rink-liner="false"
v-bind:is-liner-sku="true"
v-bind:is-bundle="false" product-type="undefined" price="612" sku="CS060120" image="https://www.nicerink.com/media/catalog/product/l/i/liner_1.jpg" magento-base-url="https://www.nicerink.com" name="60' x 120' NiceRink CS Liner">
</vue-product-options>
<div class="product_options_panel package_cta">
<h3>
Looking for a full Rink Package?
</h3>
<p>
We've got you covered!
</p>
<a class="button dark" href="/rink-builder">
Rink Packages
</a>
</div>
</section>
This is what I'm trying:
ieDoc.getElementsByClassName("product_options")(0).getAttribute("sku")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($(".sdfv").attr("sku"));
});
});
</script>
</head>
<body>
<vue-product-options class="sdfv" sku="CS060120"></vue-product-options>
<button>Click the button to get sku value</button>
</body>
</html>
Try using attribute selector
Debug.Print ie.document.querySelector("[sku]").getAttribute("sku")
If you need to be more specific you can add the type selector so it becomes
Debug.Print ie.document.querySelector("vue-product-options[sku]").getAttribute("sku")
Upon clicking the image, I want the image to pop out and show message. But i don't know how to do it.
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">
<a href="Images/royalpalace.jpg" data-lightbox="image-1" data-title="RoyalPalace">
<img src="Images/royalpalace.jpg" width="19.7%" height="200px">
</a>
You need to link the appropriate files in the given order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">
And make sure the image paths are valid.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">
<a href="https://cdn.pixabay.com/photo/2015/08/11/10/41/royal-palace-883800_960_720.jpg" data-lightbox="image-1" data-title="RoyalPalace">
<img src="https://cdn.pixabay.com/photo/2015/08/11/10/41/royal-palace-883800_960_720.jpg" width="200px">
</a>
Here is one way to do it:
First, move the <img> out of the <a> tag, or else it will redirect the user to another page, then to pop the image out, write this in a js script:
document.getElementsByTagName("img")[0].addEventListener("click", function () {
this.style.display = "none";
alert("Your message here");
})
You can enhance this by giving the <img> an id attribute and then using document.getElementById("<Your img id>") to access it.
Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;
I'm using Foundation 5 magellan navigation but smooth scroll doesn't work. In example all is fine: http://foundation.zurb.com/docs/components/magellan.html
My code: http://jsfiddle.net/5LKzf/
<head>
<link rel="stylesheet" href="css/foundation-5.2.2/css/foundation.css" />
<link rel="stylesheet" href="css/foundation-5.2.2/css/normalize.css" />
<script src="css/foundation-5.2.2/js/vendor/modernizr.js"></script>
</head>
<body>
//my link
<li class="item-109 menu-el active"><dd data-magellan-arrival="/"><a href="#/" >Main Page</a></dd></li>
//my anhor
<a class="link-pos" data-magellan-destination="/" name="/"> </a>
<script src="css/foundation-5.2.2/js/vendor/jquery.js"></script>
<script src="css/foundation-5.2.2/js/vendor/fastclick.js"></script>
<script src="css/foundation-5.2.2/js/foundation.min.js"></script>
<script>
$( document ).foundation();
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/main.js"></script>
</body>
Did I forget to include any files?
According to the docs
"Make sure jquery.js, foundation.js, and foundation.magellan.js have been included on your page before continuing. For example, add the following before the closing tag:"
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
According to the code you posted, you are missing the magellan js, which would explain why it doesnt work!
I have worked with Foundation 5, and with some features you need to ensure you include the relevant javascript.
I hope this helps!