i have a wordpress website, there is a slider in the homepage which is coming from some widget, the slider is static, when i inspected the element it was showing something like below:
<div class="swiper-container services-slider swiper-container-initialized swiper-container-horizontal" data-cols="3" data-autoplay="0">
now i want the slider to autoplay automatically, as i am not able to edit the code of the slider i am trying to put some css in the head section of the website so the slider plays, how can i add autoplay attribute inside css, please help, thanks in advance
With jquery something like this may work if the slider options have not already been rendered from the data attributes
$('.swiper-container').data('autoplay', 1)
Or
$('.swiper-container').attr('data-autoplay', 1)
With on ready
(function($){
$(document).ready(function(){
$('.swiper-container').attr('data-autoplay', 1)
});
})(jQuery);
Related
I have embedded a twitter timeline in a html page with this javascript code:
<a class="twitter-grid" href="https://twitter.com/TwitterDev/timelines/539487832448843776">National Park Tweets</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Here is the page: http://goo.gl/E4RON8
The problem is that I would have this effect:
I have the correct visualization if I set zoom to +200% in Chrome.
Can you help me to set the correct css rules?
Thank you.
The problem is you didn't set the width properly. Try to add below CSS changes,
width=100% in class "entryContent" - This will expand the list items as needed.
max-width=100% in class "page-template-page-fullwidth-php .col-md-8"-this will over-ride existing max-width.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I have a youtube video pop up that works well but I want to include a custom close button. I have done research but this has all come to nothing so I am hoping my stack buddies can help.
What I am estmiating from your question is you want a custom close button to close the DIV or iframe that your YouTube videos are in. I suggest jQuery for this:
$(function(){
$(".closeBtn").click(function(){
$($(this).data("target")).hide();
});
});
Then in the HTML:
<div class="video" id="v1">
<div class="closeBtn" data-target="#v1"></div>
<iframe></iframe>
</div>
JS Fiddle
What the data-target (data-target="#v1") does is target the ID of the div (<div class="video" id="v1">) then in jQuery, adding the animation effect .hide() , .fadeOut(500) to the ID.
I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
I would like to preview the content of a div with imgPreview
I tried to do this:
<div id="five" style="background-image:url(1.jpg);"></div>
In script:
<script type="text/javascript">
$('div#five').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
I would like that when it passes over muose make preview of 1.jpg
Help me! Many thanks, ando sorry for my bad english! :).
From "imgPreview demos" # james.padolsey.com:
The image preview shows up in a tooltip-like box appearing alongside
the user's cursor when hovering over a link. The plugin is entirely
unobtrusive; it does not require any hooks to target specific links
(no non-semantic classes); it will automatically detect the anchors
that are linking to images and will only apply the preview effect to
them.