Trying to achieve this HTML shape where I'd like to place many photos inside this shape with onclick method there
It's better to use javascript EventListener rather than onclick.
eg.
let btn = document.getElementById('pictureButton');
btn.addEventListener('click', function(){
document.getElementById('togglepic').style.display = 'block';
});
#togglepic {
display:none;
}
<button id="pictureButton">Click me</button><br/>
<img id="togglepic" src="https://imgur.com/VYWEWRF.png"/>
Obviously, instead of the <img> element, you could add your "carousel" element, but the principle is the same - simply change the display: property from none to block
Related
I have a textarea generated with the bellow js code, I also have a button that creates additional text areas when clicked, I NEED to make each text area draggable, Ussually because the "id" is "myForm" it should become draggable using jquery $('#myForm') but it does not work, I have try all forms but it does not work. I also have check similar questions but not luck... I will appreciate if some one can help me out. in the folder I have the Html, The css and all jquery libraries working Ok.
I check with the alert box.
Note: all I need is a textarea with a button to add as many additional text areas and this areas to be draggable, the code to generate this text areas can be any code. In case there is a easier way to accomplish the same thing... Thank you in advance.
function myFunction() {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);
var y = document.createElement("TEXTAREA");
document.getElementById("myForm").appendChild(y);
}
Is HTML5 Drag and Drop what you are looking for?
All you need to do is define draggable=true in your element and code the relevant ondragstart and ondragend logic. This works with both vanilla JS and frameworks like React.
Made for you kindly however dosn't work in this editor
var new_offset = {top:30, left:40};
var new_width = 200;
var new_height = 150;
var newElement$ = $('<div><textarea id="textarea"></textarea></div>')
.width(new_width)
.height(new_height)
.draggable({
cancel: "text",
start: function (){
$('#textarea').focus();
},
stop: function (){
$('#textarea').focus();
}
})
.resizable()
.css({
'position' : 'absolute',
'background-color' : 'gray',
'border-color' : 'black',
'border-width' : '1px',
'border-style' : 'solid'
})
.offset(new_offset)
.appendTo('body');
textarea {
height:100%;
background-color:whit;
width:100%;
resize:none; border:none;
padding:0px; margin:0px;
}
div { padding:0px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
I hacked it and piggy tailed to a span element this way the span element is easy to make draggable with jquery, The textarea is not draggable but it has to follow the span element THUS is draggable.
The span element has the class= "drag",then I used the jquery $('.drag').draggable and that made the whole trick. Dirty code BUT it works 100% the way I needed.
I have this simple <div>:
<div id='myId' class='hide'>...</div>
I want to show it using the class show.
$("#myId").show();
It doesn't work, the <div> keeps the hide class.
You can use toggleClass() as follows:
$("#myId").toggleClass("hide show");
or
$("#myId").removeClass("hide").addClass("show");
.show() won't change the class of the element(s) it is called on, it will simply change the necessary CSS styles to hide it from the user.
To remove the class, use .removeClass():
$('#myId').show().removeClass('hide');
If you are using the .hide and .show CSS classes to toggle visibility of your elements, just use .show() and .hide() methods. Otherwise, simply removing your class will do:
$('#myId').removeClass('hide');
Use callback
$("#myId").show('slow',function(){
$(this).removeClass('hide');
});
HTML
<div id='myId' class='hide'>...</div>
JS/JQuery
$(function() {
$("#myId").removeClass("hide");
});
//or remove all of class hide
$(function() {
$(".hide").each(function() {
$(this).removeClass("hide");
});
});
//or use the JQuery METHOD(S) to do the same which is class unrelated
$(function() {
$("#myId").show();
//or
$("#myId").hide();
//or
$("#myId").fadeToggle(); //opacity animation based
$("#myId").slideToggle(); //position animation based
});
Hide it like this and .show() will work:
<div id="myId" style="display:none">...</div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I have the following code:
<div class="photos-wrapper" id="detailPhoto">
<div class="pseudo">
fixedTEXT
</div>
<div class="image-wrapper">
</div>
<div class="activites">
</div>
<div class="commentaire">
</div>
</div>
I want to include my own CSS style to this first and main <div class="photos-wrapper" id="detailPhoto"> but the only way to do this is by identify the grandchild selector i.e <a href="#/123456/"> because there are multiple occurrences of the same code.
Maybe it will be a bit more clear when I show what I tried:
a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailPhoto"] {
display: none !important;
}
div.photos-wrapper[id^="detailPhoto"] < div.pseudo < a[href*="123456"] {
display: none !important;
}
That's the way I tried to do so but it obviously is not working.
The thing I am probably trying to do here is called a parent selector but I'm not quite sure.
#edit
Let's take a look on this code, it's actually more detailed:
http://jsfiddle.net/60ezqtL7/
The goal is to hide by display: none; style whole divs that are containing exactly the same values i.e. PHOTO 1
There's no need to use jQuery in this case (or many other cases).
detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))
As I mentioned in my comment to your answer, there is not parent or ancestor selecor. The easiest and most efficient way to to it via jQuery is the has() method.
$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead
Use Google to host jquery for you.
Demo : I've used the class selector in the demo as id should be unique.
addClass Demo
UPDATE
Given your update and assuming you want to display 1 and only 1 of each photo, additional wrappers with photos with the same href will be hidden.
/*Loop through each link in div with cass psudo
in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
var $this = $(this);
var href = $this.attr("href");
//if the href has been enountered before, hide the .photos-wrapper ancestor
if(found[href]){
$this.closest(".photos-wrapper").hide();
/*Other options:
Use Css direct
$this.closest(".photos-wrapper").css("display", "none");
Assign a duplicate class, then style that class ass appropriate
$this.closest(".photos-wrapper").addClass("duplicate");
*/
}else{
//otherwise add it to the array of what has been found
found[href] = true;
}
});
Demo
If you're not familiar with jquery, make sure to read up on how it is implemented and the purpose of $(document).ready();
Update 2
To hide all containers with replicated href use:
//Loop through each a tag
$(".photos-wrapper .pseudo a").each(function () {
var $this = $(this);
//Get the href
var href = $this.attr("href");
//Check if more than one exists
if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
//Hide all .photo-wrapper containers that have the replicated href
$('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
}
});
Another Demo
I still suggest removing duplicates server-side if at all possible.
On a complete side note, the <center> tag was depreciated back at HTML4 and should no longer be used. Use CSS instead. There are pleanty of examples out there on how to center content using CSS.
At this time there is not a way to do this with only CSS, but you can do it easily with JQuery. This will search the descendants of #detailPhoto and hide the href (set it to display: none;).
<script>
$(function() {
$('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>
To search parents, you'd use this.
<script>
$(function() {
$('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>
To use this you will also need the JQuery library added to the head of your document.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I am using JQueryUI draggable and I would like to be able to add styling to the draggable element while it is being dragged. I have tried variations on this code:
$(".ui-widget-content").draggable({
drag: function(event, ui) {
$(this).css("width", "50px");
});
However, my attempts have failed and I believe it it because I don't know how to get the draggable element from the ui object. What am I missing?
No need for extra JavaScript. Just use this CSS selector:
.ui-draggable-dragging {
/*
This class is applied to the element while it is being dragged.
This is done automatically by jQueryUI.
*/
width: 50px;
}
Read the docs here: http://jqueryui.com/demos/draggable/#overview-main