I have an image and when its clicked I want to show some html ( a div with some text and buttons). I know I can use the html config in a window or panel but is it possible to show the element without it being encapsulated in a component?
Here is the code for the image and click handler:
{
xtype:"image",
src:"/blah/helpicon.png",
listeners:{
render: function (c) {
c.getEl().on('click', function(e) {
//show html here, targeted on image icon
}, c);
}
}
}
Here is the html I want to show. All it is really is a fancy tooltip, thats all. And since its a tooltip i dont want to encapsulate it in a window:
<div id="test" class="hopscotch-bubble-container" style="width: 280px; padding: 15px;"><span class="hopscotch-bubble-number">1</span>
<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>
<div class="hopscotch-content">Step 1 Instructions here.</div>
</div>
<div class="hopscotch-actions">
<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>
<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>
</div>
thanks.
How about making your own Component with your custom html?
Ext.define('mycomponent', {
extend: 'Ext.Component',
cls: 'hopscotch-bubble-container',
width: 280,
padding: 15,
id: 'test',
html: [
'<span class="hopscotch-bubble-number">1</span>',
'<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>',
'<div class="hopscotch-content">Step 1 Instructions here.</div>',
'</div>',
'<div class="hopscotch-actions">',
'<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>',
'<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>'
]
});
By default a component will use a div to render your element, so by applying the outer html attributes to the component (cls, width, padding, and id) it will generate the outer most div correctly. The inner html is just passed through the html config. Now you can manage your component without having to deal with the html elements directly.
Here is a fiddle with an overly simple example of adding the new component to a container.
Related
original title: VueJS with Bootstrap, stretched link with hidden button
I am trying to make clickable bootstrap cards in a VueJS project, I want clicking the card to open a collapsible element within the card, right now I have something that works using a button with the "stretched-link" class
<b-card
v-bind:img-src="`https://via.placeholder.com/200`"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<b-button v-b-toggle="'collapse-' + unique-identifier" variant="primary" class="stretched-link ">Toggle</b-button>
<b-collapse v-bind:id="'collapse-' + unique-identifier" class="mt-2">
<b-card>This is the collapsed content</b-card>
</b-collapse>
</b-card>
I'm trying to make this work without having a visible button in the card, I've tried using the invisibile class and the d-none class (class="stretched-link d-none" and class="stretched-link invisible")
In both cases, the button is made invisible but so is the stretched link. Is there any way to maintain the active stretched link area while hiding the button icon?
ok I figured out a solution for my particular use case with JQuery,
What I was really after was a clickable image with the functionality of a bootstrap button. So this is a solution for that problem, not exactly hidden stretched links.
In my Vue component I define the triggerButton method, which finds a button by its id and clicks it.
<script>
import $ from 'jquery'
export default {
props: //just filling this for structure,
data() {
return {
//stuff
}
},
async mounted() {
//more placeholder structure
},
methods: {
//here is the sauce
triggerButton(id) {
$("#"+id).click();
},
}
}
</script>
Then in the <template> body I have a hidden button. "unique-identifier" is just a unique number that is put in, it's needed in my case because im generating many of these elements in a for loop and they need to have distinct ids.
In this case I'm using the bootstrap button to trigger a unique modal.
<b-button style="display:none" v-bind:id="'button'+ unique-identifier" v-b-modal="'modal' + unique-identifier">Launch centered modal</b-button>
Then finally I have an image displayed in the bootstrap card, and on click i call the triggerButton method that will now display my modal.
<img v-on:click="showModal('button' + unique-identifier)" :src="`https://placekitten.com/g/200/200`"/>
i am trying to add my header title along with the prev,next,today onto the left side of the page,how ever it doesnt allow for them to be on one line, it line breaks at the title
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid' ],
header: {
left: 'title prev,next today',
center: '',
right: 'dayGridMonth'
}}
how do i get it to move up like
html
<div class="fc-toolbar-chunk">
<h2 class="fc-toolbar-title">November 2020</h2>
<button class="fc-prev-button fc-button fc-button-primary" type="button" aria-label="prev">
<span class="fc-icon fc-icon-chevron-left"></span></button><button class="fc-next-button fc-button fc-button-primary" type="button" aria-label="next"><span class="fc-icon fc-icon-chevron-right"></span></button>
<button disabled="" class="fc-today-button fc-button fc-button-primary" type="button">today</button></div>
This happens because <h2> elements (like all h... elements) are, by default, block-level elements. It appears that the fullCalendar developers didn't consider the possibility that you might want to put the title and buttons into the same section of the header, so they didn't change that.
However you can alter this easily by setting the element's display to inline, e.g.
.fc-toolbar h2 {
display: inline;
}
Demo: https://codepen.io/ADyson82/pen/qBaWxVo
I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference
Basically, I want to put a inside . However, the ion-slide swipe is so sensitive, so I cannot scroll the content in . It just swipes to the next slide.
Is it possible to disable the swipe action in a certain area in ?
As shown in the picture, I want to disable the swipe action on the B area. I guess (if possible) I need to put some class in ion-scroll and/or div under it, but I could not figure it out.
This is my partial HTML code:
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
... // A area content
<ion-scroll direction="x" ...>
<div style="width: 5000px; height: 100px" ...>
// B area. Very wide content
</div>
</ion-scroll>
... // C area content
</ion-slide>
</ion-slide-box>
I really appreciate your help.
Here's another approach:
add these to the wide element:
<div on-touch="mouseoverWideDiv()" on-release="mouseleaveWideDiv()">
then in your controller:
$scope.mouseoverWideDiv = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
$scope.mouseleaveWideDiv = function() {
$ionicSlideBoxDelegate.enableSlide(true);
};
Here is another way of doing this:
In your controller add a function:
$scope.disableSwipe = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
In your view add the ng-init attribute on the slide-box element
<ion-slide-box ng-init="disableSwipe()">
This will disable the slide-event.
You can now use a controller function to slide to a given index like this:
Since google sent me here when i was searching for solutions using ion-slides (instead of ion-slide-box) i will leave here the solution i ended up using.
One thing first: ion-slide-box is currently deprecated, so you should use ion-slides now.
First set options variable in ion-slides element:
<ion-slides options="options">
Then inside your controller you should configure the options variable with the noSwiping options as follows:
$scope.options = {
noSwiping: true,
noSwipingClass: 'do_not_swipe',
}
And then, in an element inside your ion-slide-page add the "do_not_swipe" class to the element you want swipe to be disabled.
Taking your code as an example, you should have your html like this:
<ion-slides options="options">
<ion-slide-page>
... // A area content
<ion-scroll class='do_not_swipe' direction="x" ...>
<div style="width: 5000px; height: 100px" ...>
// B area. Very wide content
</div>
</ion-scroll>
... // C area content
</ion-slide-page>
</ion-slides>
I want to create a custom "X" close or hide button, image, text that works for a complete element box in wordpress. I've attached a sample image of the "x" on something else. For my site however I need it to control the whole element or (tiles) on my page not just the single box of text.
Sample image
This is a easy task for you, basically on this situation what you have to do is create the "x" graphic with any iconfont or you can use the "X" from any font(like a regular x that you just have to touch your keyboard) then what you have to do is follow this example.
HTML
<div class="yourbox">
<!--- THIS IS THE BOX THAT YOU WANT TO CLOSE, you can use id or clas whatever you want-->
<p> text or content of the box <p>
<a id="close"href=""> X </a>
</div>
CSS
.yourbox{
height:100px;
width:400px;
background-color: red;
}
JS
<script type="text/javascript">
$(function() {
$("#close").click(function () {
$( "#yourbox" ).css( "display", "none" );
});
});
</script>
You could name the function as you want, use class instead of id and basically the code will hie the div after you touch the " X ".