I found this code for collapsible css div here at stackoverflow and I want to use multiple instances of this on one page, but when I click any of the "read more" links it opens the first instance only.
How to modify this script to make each link open only the div associated with it?.
The source: http://jsfiddle.net/QkKej/
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
document.getElementById("more-button").value=document.getElementById("morebutton").value=='Read more'?'Read less':'Read more';
}
The page where i'm using it: http://www.udayansalimbanerjee.com/articles
Modify these attributes:
id="more-button" ---> class="more-button"
id="grow" ---> class="grow"
Additionally complete onclick:
onclick="growDiv(this)"
Then you can use jQuery (I see, the site supports it):
function growDiv(elem) {
var elEq = $(".more-button").index(elem);
$(elem).val(
$(".grow").eq(elEq).is(":visible") ? "Read more" : "Read less"
);
$(".grow").eq(elEq).slideToggle("fast");
}
This should do the trick. :)
Edit: I almost forget the "Read more/less" button.
Related
I'm working on my WordPress website with Visual Composer.
I need to include a pageable container but it would be great if it can be like a slideshow.
This is my pageable container
Thanks in advance,
Regards :)
Based upon the current version of WP Bakery Page Builder the below works for me:
To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.
Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.
(function ($) {
$(document).ready(function(){
$( '#arrow_prev' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'prev');
});
$( '#arrow_next' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'next');
});
function move_pageable_container(pageable_container,direction){
// Make a list of the panel IDs
var panel_ids = $(pageable_container.find(".vc_tta-panel"))
.map(function() { return this.id; }) // convert to set of IDs
.get();
// Find position of the active panel in list
var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));
var new_pos = 0;
switch(direction) {
case 'prev':
if (current_active_pos > 0){
new_pos = current_active_pos-1;
}else{
new_pos = panel_ids.length-1;
}
break;
case 'next':
if (current_active_pos < panel_ids.length-1){
new_pos = current_active_pos+1;
}else{
new_pos = 0;
}
break;
}
// Clear active panels
$(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
$(this).removeClass("vc_active");
});
var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);
$(new_active_panel).addClass("vc_animating");
$(new_active_panel).addClass("vc_active");
setTimeout(
function(){
$(new_active_panel).removeClass("vc_animating");
}, 350);
}
}
);
})(jQuery);
If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:
#id_of_pageable_container .vc_tta-panel.vc_animating {
opacity: 0!important;
}
Where #id_of_pageable_container is the ID that you gave your pageable container
A simpler solution with vanilla js only:
The idea is to find the target page button and press it programmatically, so that there is no need to mimic the plugin's animations as in Chaz's solution.
Add js (via Raw JS widget / other means):
function prevSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i - 1 < 0) return;
slides[i - 1].firstChild.click();
return;
}
}
}
function nextSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i + 1 >= slides.length) return;
slides[i + 1].firstChild.click();
return;
}
}
}
Add button widgets and set href to call js:
For left arrow button,
javascript:prevSlide();
For right arrow button,
javascript:nextSlide();
Hope this helps.
I prefer to use the Post Grid widget for that. Keep in mind that the pageable container is not totally responsive, it doesn't react to swipe touching, but the Post Grid does.
Post Grid is really powerful, although it also has its caveouts. You can create your content with posts and pages, or a custom post type and then filter what you want to show in your slider from the widget options.
In "advanced mode" you can use the Grid Builder to create your own template and control the output.
The only problems that I've found with this method is to set a variable height in sliders and that sometimes it is slow loading content and is not possible to do a lazyload.
I have a main page. This page has an iframe. The iframe has a page loaded in it that has a table and an iframe.
1) I want to display the main page iframe (which I am able to do by detecting the pressing of the 'Enter' key which executes a function that grabs the main page's iframe element and generates a full screen view of it -- however the background color is black and I can't read text. I've tried every CSS solution to change the background color. I tried everything I could find on here regarding that problem. Please help me find a solution that will work on all browsers.
2) Aside from that, I want to generate a full screen view of the main page's iframe document's table and generate a full screen view of the main page's iframe document's iframe. I am unable to generate a full screen view of the main page's iframe document's table. I am unable to generate a full screen view of the main page's iframe document's iframe. Please let me know how this can be done. I can successfully store the main page's iframe document in a variable using the contentWindow lingo -- but then using the variable to access its contents using the get Element by id nomenclature does not work. Please help me find a way to generate a full screen view of the main page's iframe document elements.
Please help with the two issues above.
My main page iframe id is "hello". The main page's iframe's document's table id is "jukebox". The main page's iframe's document's iframe id is "albumcover".
Not that this is of any actual debugging use other than letting you know that all elements discussed have id's and the get Element by id code still did not work or was able to be displayed by the function displaying a full screen view of elements...except when using the get Element by id code with the function displaying a full screen view of elements together when trying to generate a full screen display of the main page's iframe...it just helps someone who may help with creating a meaningful example. It'll help others finding this web page follow the issue's solution and if they have a similar problem then that information may allow them to follow the solution better and solve their own problem.
Thanks guys!
Main page:
function toggleFullScreen(x, y) {
var videoElement;
var q;
var w;
if (x == 1)
{
if (y == 0)
{
q = document.getElementById("hello");
w = q.contentWindow.document;
alert("videoElement = documenttable;");
}
else if (y == 1)
{
alert("videoElement = documentalbumiframe;");
}
else if (y == 2)
{
alert("videoElement = queuetextarea;");
}
else if (y == 3)
{
alert("videoElement = songlisttextarea;");
}
}
else
{
if (y == 0)
{
videoElement = document.getElementById("hello");
}
}
if ( (x == 1) || ( (x == 0) && (y == 0) ) )
{
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
}
<iframe src="menu.html" height=549 width=100% frameborder=0 name = "hello" id = "hello" style ="overflow-x:scroll"></iframe>
iFrame's document page:
<table id="jukebox" border = "0">
...
<iframe id="albumcover" height=432 width=450 frameborder=0 name = "cake" style =""></></iframe>
SO36580875
Problems generating a full screen view of HTML elements
This demo uses the Full Screen API:
The external script file fullview.js is responsible for toggle button state (full screen mode/normal view mode), and determining what state the viewport should be changing to.
Blue Button: Full Screen Toggle for index.html targets <body>
Yellow Button: Full Screen Toggle for jukebox.html targets the iframe#jBox
Fuschia Button: Full Screen Toggle for cover.html targets the iframe#cBox
In order to test the full screen feature, you must test it out of the IDE (please see illustration. )
README.md
PLUNKER
fullView.js
// fullView.js
function fullView(event) {
var btn = this;
var ele = this.id;
var tgt = document.querySelector('.tgt' + ele);
var state = btn.classList;
if (state == 'off') {
enterFS(tgt);
btn.classList.remove('off');
btn.classList.add('on');
} else {
exitFS();
btn.classList.remove('on');
btn.classList.add('off');
}
}
function enterFS(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFS() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Usage
/*
Requirements:
A trigger element
ex. <button>, <a>, etc.
A target element
ex. <body>, <section>, <div>, etc.
Assign an id to the trigger.
ex. <button id='btn1'></button>
Assign a specific class to the target.
There is a naming pattern:
'.tgt'+{{id of trigger}}
ex. .tgtbtn1
<body class='tgtbtn1'>
Add an eventListener() to trigger.
var btn1 = document.getElementById('btn1');
Use fullView as the eventHandler
btn1.addEventListener('click', fullView, false);
*/
Long question: I have seen on Facebook that a single popup window (like those when you opens a question from someones feed) can affect the scroll behavior so it don't scroll the main content but only the content in the popup window according to the height of it, of course. How can I do something like this?
Short question: How can I make the scroll "focus" on the contents height in the welcome DIV?
I've made it this far: http://jsfiddle.net/y3qV5/506/. I hope you understand what I mean :)
Thanks in advance.
You can add overflow: hidden to the body.
http://jsfiddle.net/y3qV5/520/
body.freeze { overflow: hidden; }
$('#pop').click( function() {
$('.welcome').fadeIn();
$('body').addClass('freeze');
});
$('#close').click( function() {
$('.welcome').fadeOut();
$('body').removeClass('freeze');
});
Old answer:
http://jsfiddle.net/y3qV5/519/
//bind on show
$('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
console.log('scroll');
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
console.log('prevent');
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
//unbind on close
$('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');
Let me explain what I'm trying to achieve. Currently, I have button and want to add image and add text. I have parent div container in which all child div adds dynamically.
Add image button adds img tag with image inside the parent div and add text button adds div containing text inside parent by using append method.
But what I want that when ever I create them, they should place in a specific position which will be common to all. Lets take center of the parent so when ever I add image or text it should create at the center of the parent
Code for adding dynamic image
$(document).ready(function () {
$('#addImage').click(function () {
var url = 'Default.aspx';
var dialog = $('<iframe"></iframe>').appendTo('body');
dialog.load(url).dialog('open').dialog({ modal: true, width: 480,resizable: false ,open: function (type, data) { $(this).parent().appendTo("form"); },
buttons: {
'OK': function() {
var img = document.createElement('img');
$(img).attr("id", "dyndiv" + count);
$(img).attr("width", 60);
$(img).attr("height", 140);
$(img).attr("src", 'Uploads/'+ $get('dvFileName').innerHTML) ;
var $ctrl = $(img).addClass("draggable ui-widget-content").draggable({ containment: '#containment-wrapper', cursor: 'move', snap: '#containment-wrapper' });
objid = "dyndiv" + count ;
count++;
$("#containment-wrapper").append($ctrl);
$(this).dialog('destroy');
},
'Cancel': function() {
$(this).dialog('destroy');
// I'm sorry, I changed my mind
}
}
});
return false;
});
});
At last i got the solution. In the above question I am appending the div, now i am also explicitly defining the position of the div after the append statement above.
I'm new to jQuery and i must admit that i've understood nothing yet, the syntax appears to me as an unknown language although i thought that i had my experiences with javascript.
Nevertheless i managed it to implement this menu in my asp.net masterpage's header.
Even got it to work that the content-page is loaded with ajax with help from here.
But finally i'm failing with the menu to disappear when the new page was loaded asynchronously. I dont know how to hide this accursed jQuery Menu.
Following the part of the js-file where the events are registered for hiding/disappearing. I dont know how to get the part that is responsible for it and even i dont know how to implement that part in my Anchor-onclick function where i dont have a reference to the jQuery Object.
buildmenu:function($, setting){
var smoothmenu=ddsmoothmenu
var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
var $headers=$mainmenu.find("ul").parent()
$headers.hover(
function(e){
$(this).children('a:eq(0)').addClass('selected')
},
function(e){
$(this).children('a:eq(0)').removeClass('selected')
}
)
$headers.each(function(i){ //loop through each LI header
var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
var $subul=$(this).find('ul:eq(0)').css({display:'block'})
$subul.data('timers', {})
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
+ '" style="border:0;" />'
)
if (smoothmenu.shadow.enable){
this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
if (this.istopheader)
$parentshadow=$(document.body)
else{
var $parentLi=$curobj.parents("li:eq(0)")
$parentshadow=$parentLi.get(0).$shadow
}
this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function(e){
var $targetul=$subul //reference UL to reveal
var header=$curobj.get(0) //reference header LI as DOM object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
if ($targetul.queue().length<=1){ //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable){
var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
header.$shadow.css({opacity:1})
}
header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
}
}
}, ddsmoothmenu.showhidedelay.showdelay)
},
function(e){
var $targetul=$subul
var header=$curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){
$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable){
if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
header.$shadow.children('div:eq(0)').css({opacity:0})
}
header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
}
}, ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}
one link of my menu what i want to hide when the content is redirected to another page(i need "closeMenu-function"):
<li>Delivery Control</li>
In short: I want to fade out the submenus the same way they do automatically onblur, so that only the headermenu stays visible but i dont know how.
Thanks, Tim
EDIT: thanks to Starx' private-lesson in jQuery for beginners i solved it:
I forgot the # in $("#smoothmenu1"). After that it was not difficult to find and call the hover-function from the menu's headers to let them fade out smoothly:
$("#smoothmenu1").find("ul").hover();
Regards,
Tim
Ok, I didn't read your whole post. But if you are using a jQuery Menu, that menu should having a container element like <div> or <ul> and they will either have a class or id
In case it is a id then do
$(document).ready(function() {
$("#myelementid").hide();
});
In case it has a class then do
$(document).ready(function() {
$(".myelementclass").hide();
});
Hope this helps
UPDATE
$("#mainmenu").children().hide(); // to hide all child elements
or
$(".submenu").hide(); //to hide every submenu