Random opening tabs/pills - bootstrap 3 - javascript

i want to open on every new site load another random tab with content.
i think i have to do it with some java script but it don´t work.
You can look at the page here: LINK
Thanks for helping.

use this code :
var items = $('[data-toggle=pill]');
var i = parseInt(Math.floor(Math.random()*items.length));
$('#tabs a:eq(' + i + ') ').tab('show');

Select all available tabs (the code below uses jQuery which is available on your page)
Draw a random item
"Simulate" a click event
You can do it like this:
$(function () {
var items = $('[data-toggle=pill]');
var randomItem = items[Math.floor(Math.random()*items.length)];
randomItem.trigger('click');
});

Related

Trying to use jQuery to trigger an anchor click after the page loads

So this has been asked a number of times on here, and while I've read all of the threads I can find, this still isn't working for me.
A little background: I'm working on a Wordpress site with a grid plugin, and I'm trying to trigger a filter when the page loads, depending on a url parameter. For the purpose of this thread I've just hardcoded a url parameter (the category variable) as an example because that functionality is working fine.
The anchor tag I'm trying to trigger:
Tarps and Covers
The broken code I'm trying to use to trigger the click event:
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
});
</script>
A console log returning the anchor variable confirms that I'm selecting the correct jQuery object, and I've also tried anchor[0].click() to trigger it with no success. Does anyone see any problems that I'm overlooking?
I tried it :
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
anchor.on('click',()=>{
alert();
})
});
Everything is working

TinyMCE disappears after save Widget in Wordpress

first of all, sorry for my bad english, I'm from Germany.
I just created my first widget. It's a widget that creates automatically a grid out of a list.
I can add a new list-item and every form field will be duplicated.
But after 3 days of searching the internet without a result I decided to ask by myself...
So here is my first problem, when I add a new item, the TinyMCE in the new item is disabled, I can't click on the buttons or type text into it.
There are no errors in the console log.
My second problem is when I save the widget, all TinyMCE-Editors disappear and leave the textareas, with the html code.
Here also: no errors... but I've seen, that the TinyMCE isn't loading after save. There is no iframe, nothing but the textarea.
After reload the widget page, everything is fine again for both problems.
So I have to add new items and save the page and then reload it to edit and edit the content, but that don't solve the problem.
I think I have to reinitialize the TinyMCE but I don't know how.
I had problems with adding the wordpress editor to my widget so I integrated the jQuery TinyMCE from the website.
Here is the code snippet of my add-function:
$("body").on('click.sgw','.sgw-add',function() {
var sgw = $(this).parent().parent();
var num = sgw.find('.simple-grid .list-item').length + 1;
sgw.find('.amount').val(num);
var item = sgw.find('.simple-grid .list-item:last-child').clone();
var item_id = item.attr('id');
item.attr('id',increment_last_num(item_id));
$('.toggled-off',item).removeClass('toggled-off');
$('.number',item).html(num);
$('.item-title',item).html('');
$('.custom_media_image',item).attr('src','');
$('textarea',item).val('');
$('img.custom_media_image',item).each(function() {
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
});
$('textarea',item).each(function() {
var id_iframe = $(this).attr('id');
tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
});
$('label',item).each(function() {
var for_val = $(this).attr('for');
$(this).attr('for',increment_last_num(for_val));
});
$('input',item).each(function() {
var id_val = $(this).attr('id');
var name_val = $(this).attr('name');
$(this).attr('id',increment_last_num(id_val));
$(this).attr('name',increment_last_num(name_val));
if($(':checked',this)){
$(this).removeAttr('checked');
}
if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url')){
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
}
if($(this).hasClass('button-primary')){
var number_val = $(this).attr('number');
$(this).attr('number',increment_last_num(number_val));
}
$(this).not('#custom_media_button').val('');
});
sgw.find('.simple-grid').append(item);
sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
});
I hope this is understandable and someone can help me.
You can download the zip here: https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0
Are you trying to run several editors at once? There's a limitation with Wordpress and TinyMCE where you can basically one editor at a time. I've gotten around that but it was very difficult.
To load a new editor you may have to remove the old one:
tinymce.remove();

jQuery show() doesn't work after hide()

I'm trying to display div with content after click on image, but when my page is loaded and I try to click then nothing happens. Interesting that if my page is loading with not hidden content and then I'll do hide() and after that show() id console then it works perfectly. What am I doing wrong?
$(document).ready(function() {
$('.content-flowers').hide()
var first = $(".content-flowers").children()[0];
var second = $(".content-flowers").children()[1];
var third = $(".content-flowers").children()[2];
var firstImg = $(".flower-image")[0];
var secondImg = $(".flower-image")[1];
var thirdImg = $(".flower-image")[2];
$(firstImg).click(function(){
$(first).toggle(1000);
})
/*$(".flower-image").click(function () {
$('.content-flowers').show(1000);
});*/
});
Last commented function works also good, but that function loads all three divs with content, I want in order to after click on 1 image the first div with content will display
You've said the commented-out version works other than that it does all three at the same time, but the earlier version does not work.
They do very different things. Your un-commented-out code looks at the children of the .content-flowers elements:
var first = $(".content-flowers").children()[0];
But your commented-out version works on the .content-flowers elements themselves:
$('.content-flowers').show(1000);
I suspect it's the .children() part that's making it fail. I think you want:
var first = $(".content-flowers")[0];
// No .children() here ----------^
...as the minimal change.
That said, though, the whole thing can be dramatically simpler:
$(document).ready(function() {
$('.content-flowers').hide()
// Get the flower images
var images = $(".flower-image");
// When a flower image is clicked...
images.on("click", function() {
// Determine its index relative to the others...
var index = images.index(this);
// And show that content
$(".content-flowers").eq(index).toggle(1000);
});
});
You already applied the jquery function on the variable first. So try first.toggle(1000) instead. Remove the $ sign.

gallery / click image, replace it with new image

i did research for some hours but i can't find anything that is close enough to what I'm looking for. if you know a similar topic, please post the link.
i have not much experience with/in js. i want to create a small simple gallery.
i have a single image on the website. On click the image should be replaced by another one (image2). when i click now on this one, it should be replaced by image3 and so on.
i tried following but this doesn't work at all.
JS
$('.image1').click(function() {
$(this).attr('src', 'image2.jpg');
$(this).addClass('image2');
});
$('.image2').click(function() {
$(this).attr('src', 'image3.jpg');
$(this).addClass('image3');
});
…
when i get the last image (for example "image10"), the gallery should go to the start (image1).
thx for your help
You are looking for something called a Carousel, you have plenty opensource implementations of them on github. One of the most used is Lightbox : https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js
Code is not very long, and you should 'easily' (between quotes :p) find part of it you need for your page.
To show using index() does indeed make sense here you go:
Fiddle
JS Code
$('.image').first().show();
$('.image').on('click', function () {
target = $('.image:visible').index();
lastElem = $('.image').length -1; //2 cause 3 images..
target === lastElem ? target = 0 : target = target + 1;
$('.image').hide()
$('.image').eq(target).show();
});
All images besides the first are initially hidden.
Write something like this. You don't need 10 different event handlers.
Create a common class .. for instance imageClass
$(document).on('click', '.imageClass', function () {
var src = $(this).attr('src'); //image1.png
var index = src.split('.')[0].replace('image',''); //get index `1`
//add 1 to index or reset to first image
index = (index == "10") ? 1 : parseInt(index) + 1;
$(this).attr('src', 'image' + index + '.jpg');
});

How can one identify the currently clicked link with Javascript?

I am using Internet Explorer.
I added a context menu item (through the registry) such that when right clicking on a link in a webpage a custom menu item pops up. Upon selection, this menu item runs some javascript code.
I want to use the url of the link (on which I right click) in the javascript code - how do I access that url?
*Note that this should work for any webpage, not only ones which I have control over.
Thanks in advance!
<script language="JavaScript">
var parentwin = external.menuArguments;
var doc = parentwin.document;
var url = doc.URL;
// ... the rest of your code here ...
See also.
To get the source object, try:
<script language="JavaScript">
var parentwin = external.menuArguments;
var srcElement = parentwin.event.srcElement;
if (srcElement.tagName == "A") {
var url = srcElement.href;
// ... the rest of your code here ...
}

Categories